关于http请求跨域问题常用解决方案

写在前面的：

为什么需要跨域:同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。

不同源(域名、协议、端口只要有一个不同)的客户端脚本(JavaScript)在没明确授权的情况下，不能读写对方的资源。

---

1、关于只在chrome浏览器端设置的跨域：

在chrome的桌面快捷图标上右键——>属性——>快键方式一栏。在目标一栏的输入框里后面追加下面加粗斜体的一串字符串，注意和前面部分有空格。其中C:\MyChromeDevUserData需要在c盘新建一个空的这个文件夹。然后重启chrome浏览器。只有从桌面快捷方式打开的才有效。

"D:\Program Files\googlechrome_dev\chrome.exe" --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData,--user-data-dir

如果看到：

表示设置成功。

---

2、post跨域上传文件的iframe解决方案：jsp页面方式。

首先，在window对象下定义一个方法，参数为后端传过来的数据。

然后，在待提交的表单里要添加一个隐藏的input ,设置name为'callback'， value值为上面window下定义的那个方法名。

然后，在body里动态添加一个隐藏的iframe页面，在这个iframe页面里通过js设置它的document.domain为父域。

代码为：var str = location.hostname;

document.domain = str.substring(str.indexOf(".") + 1);

然后再这这个iframe里调用父页面定义的那个在window下的方法。可以是通过jsp页面后端传过来的参数：parent["${param.callback}"]( ${res} );其中${res}为后端传过来的前端所需要的参数。

---

3、普通的ajax也可以通过iframe来实现跨域请求数据：待补充。

实现原来大体和上面差不多。也是让后端返回一个页面把数据填写到js里面，然后前端通过一个iframe去加载这个页面。

document.domain + iframe      (只有在主域相同的时候才能使用该方法)；

但是缺点是性能比较低。

---

4、Jsonp方式实现跨域请求：script标签不受同源限制

JSONP包含两部分：动态构造一个script标签添加到页面和一个接受数据的回调函数。

jsonp只支持get的请求方式，因为它只能通过script标签的src传入参数。所以不支持文件上传，安全性比较弱，所传的参数量也比较少。

利用元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的javascript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

使用原生方式来写jsonp:

jsonp跨域的js原生写法

jsonp的核心法则是动态添加：下面是使用jquery的ajax封装好的jsonp:

使用JSONP的示例

---

5、最官方实用的跨域： 后端设置cors实现跨域。

简单说就是在后端返回的Response Headers里设置一个允许访问的请求源。

在NodeJS中可以这样：

使用cors跨域对请求头的设置

在其他语言的后端也是类似的。

其中，Access-Control-Allow-Origin就是我们需要设置的域名，Access-Control-Allow-Methods是允许的请求方式，Access-Control-Allow-Headers跨域允许包含的头。

---

6、To be continue......