因为javascript的同源策略，导致它普通情况下不能跨域，直到现在，我还是不能完全理解js跨域的几种方法，没办法，只能慢慢学习，慢慢积累，这不，几天又在园里看到一篇博文，有所收获，贴上来看看;

原文来自：【http://www.cnblogs.com/dojo-lzz/p/4265637.html】

探讨跨域请求资源的几种方式

 
  1. 什么是跨域
  2. JSONP
  3. proxy代理
  4. cors
  5. xdr

　　由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表（来源）

　　

　　JSONP

　　这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

1 <script>

2       var _script = document.createElement('script');

3       _script.type = "text/javascript";

4       _script.src = "http://localhost:8888/jsonp?callback=f";

5       document.head.appendChild(_script);

6     </script>

　　实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。

 1 <!doctype html>

 2 <html>

 3   <head>

 4     <meta charset="utf-8">

 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

 6     <title>jsonp_test</title>

 7

 8     <script>

 9       var f = function(data){

10         alert(data.name);

11       }

12       /*var xhr = new XMLHttpRequest();

13       xhr.onload = function(){

14         alert(xhr.responseText);

15       };

16       xhr.open('POST', 'http://localhost:8888/cors', true);

17       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

18       xhr.send("f=json");*/

19     </script>

20

21     <script>

22       var _script = document.createElement('script');

23       _script.type = "text/javascript";

24       _script.src = "http://localhost:8888/jsonp?callback=f";

25       document.head.appendChild(_script);

26     </script>

27   </head>
 

　　

　　缺点：

　　1、这种方式无法发送post请求（这里）

　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

　　Proxy代理

　　这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

 
 

　

　 需要注意的是如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。12306就提供了一个鲜活的例子。

　　

　　

　　还需要注意一点，对于同一请求浏览器通常会从缓存中读取数据，我们有时候不想从缓存中读取，所以会加一个preventCache参数，这个时候请求url变成：url?preventCache=12345567....;这本身没有什么问题，问题出在当使用某些前端框架（比如jquery）发送proxy代理请求时，请求url为proxy?url，同时设置preventCache：true，框架不能正确处理这个参数，结果发出去的请求变成proxy?url&preventCache=123456（正长应为proxy?url?preventCache=12356）;后端截取后发送的请求为url&preventCache=123456，根本没有这个地址，所以你得不到正确结果。

　　CORS

　　这是现代浏览器支持跨域资源请求的一种方式。

　　

　　当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

 前端cors

　　

 匹配

　　

　　如果我们把Access-Control-Allow-Origin去掉，浏览器会驳回响应，我们也就拿不到数据。

　　

　　需要注意的一点是Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法，以及不同类型的主题内容。总结如如：

　　1、非GET 、POST请求

　　2、POST请求的content-type不是常规的三个：application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表单）、multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）、text/plain（纯文本）

　　3、POST请求的payload为text/html

　　4、设置自定义头部

　　OPTIONS请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers，发送这个请求后，服务器可以设置如下头部与浏览器沟通来判断是否允许这个请求。

　　Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers

 
 

　　

　　如果你在调试状态，你会发现后台代码执行了两遍，说明发送了两次请求。注意一下我们的onload代码只执行了一次，所以说OPTIONS请求对程序来说是透明的，他的请求结果会被缓存起来。

　　如果我们修改一下后台代码，把Content-Type去掉，你会发现OPTIONS请求失败。

　　

　　根据我的测试，当使用cors发送跨域请求时失败时，后台是接收到了这次请求，后台可能也执行了数据查询操作，只是响应头部不合符要求，浏览器阻断了这次请求。

　　XDR

　　这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。看一下微软自己的例子就行

 

　　以上就是我在实际项目中遇到的跨域请求资源的情况，有一种跨域需要特别注意就是在https协议下发送https请求，除了使用proxy代理外其他方法都无解，会被浏览器直接block掉。如果哪位道友知道解决方法，麻烦你告诉我一声。

　　最后附上完整的测试demo

　　iss中：

 

　　node-html

 

　　node-server

 

参考文献：

javascript跨域资源总结与解决办法

jsonp跨域原理解析

Ajax进行跨域资源方法详解

Ajax POST&跨域 解决方案

HTTP access control

POST请求失败，变成options请求

XDomainRequest - Restrictions, Limitations and Workarounds

XDomainRequest object

js中的跨域的更多相关文章

  1. js中各种跨域问题实战小结（二）

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  2. js中各种跨域问题实战小结（一）

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  3. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  4. 001_Three.js中的跨域问题

    001_Three.js中的跨域问题 [情景描述]: 在初始化模型,引入字体和纹理皮肤图片的时候,由于跨域问题,出现了以下提示: Access to image at 'file:///F:/User ...

  5. JS中的跨域问题

    一.什么是跨域? 1.定义:跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.但是一般情况下不能这么做,它是由浏览器的 ...

  6. js中各种跨域问题实战小结

    什么是跨域?为什么要实现跨域呢?   这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源 ...

  7. js中的跨域方法总结

    什么是跨域? 浏览器的安全策略,只要协议,域名,端口有任何一个不同,就被当做不同的域. 下面对http://www.qichedaquan.com的同源检测 http://www.qichedaqua ...

  8. JS 中的跨域请求

    跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...

  9. 【原创】Vue.js 中 axios 跨域访问错误

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...

随机推荐

  1. OpenCV之XML和YAML文件读写

    FileStorage类 该类有两个构造函数 FileStorage::FileStorage() FileStorage::FileStorage(const string& source, ...

  2. CAN总线冲突裁决

    当总线上的几个器件同时发送数据的时候,CAN总线必须决定哪个器件可以发送,而其他的器件必须等待.冲突裁决是CAN协议最重要的一个特性. 以下图为例.总线上有器件A,B,C,D.A,B,C同时发出SOF ...

  3. kali linux2019.4安装启动后中文乱码

    1.鼠标右键找到黑框框打开终端 2.终端执行后重启,乱码解决. sudo apt-get install ttf-wqy-zenhei

  4. jenkins常用

    记最精简版的启动:gradle集成springboot+vue 安装jenkins,安装待推荐插件 服务器安装gradle 服务器安装npm 配置git仓库,配置git开发者账号等 配置gradle构 ...

  5. NOIP2016普及组解题报告

    概述 \(NOIP2016\)普及组的前三题都比较简单,第四题也有很多的暴力分,相信参加了的各位\(OIer\)在\(2016\)年都取得了很好的成绩. 那么,我将会分析\(NOIP2016\)普及组 ...

  6. IDEA配置pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. 杭电oj初体验之 Code

    PLA算法: https://blog.csdn.net/red_stone1/article/details/70866527 The problem: Analysis: 题目链接可见:https ...

  8. linux服务器上部署springboot项目，并让他持续运行到后台

    我们知道在运行springboot 项目只需要java -jar + 项目的war包(jar包)名. 但是只要终端已停止那么服务就会被关闭,也就无法访问到我们的项目了.所以我们可以使用守护进程的方式来 ...

  9. for await of异步操作集合遍历

    function Gen (time) { return new Promise((resolve,reject) => { setTimeout(function () { resolve(t ...

  10. swoole扩展怎么用

    Swoole 是 PHP 的一个扩展,可以通过 PHP 扩展的方式进行安装和启用. 本地安装 Laradock 在本地安装的话,以 Laradock 为例,需要在 laradock 目录下的 .env ...