AJAX跨域问题讲解

为什么会发生产生跨域问题？

[ 产生跨域的原因 ]

1.浏览器限制
2.跨域(协议，域名，端口任何一个不同)
3.XHR(XMLHttpRequest)请求

也就是说当我们发送的是XMLHttpRequest请求不同的域名，浏览器就会限制访问，那么就会产生跨域问题。

[ 解决跨域问题的思路 ]

1.改动客户端浏览器参数来解除限制浏览器启动加入 --disable-web-security
2.Jsonp解决是XHR请求的问题.
3.跨域: 被调用方支持跨域，调用方的隐藏请求

跨域问题解决办法

1. JSONP解决跨域

[原理]：<script>请求不受同源政策限制：JSONP动态创建<script>标签，通过<script>函数调用发出请求，返回值是也是js，函数名callback参数的值，函数参数是返回的json对象()
[弊端]：1.只支持Get请求2.发送到不是XHR请求

[jsonp请求实现]

$.ajax({
    url: 'url",
    dataType: "jsonp",
    jsonp: "callback",
    cache: true,
    success: function(json) {
        result = json;
    }
});

[jsonp请求实现原理]

//动态创建script标签
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}
// 回调函数-获取数据
function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

2. 跨域解决方案CORS

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

[简单请求-post请求]

解决：被调用放服务端设置Access-Control-Allow-Origin

被调用放服务端设置Access-Control-Allow-Methods

res.addHeader("Access-Control-Allow-Origin", "*") //允许所有域名可以跨域调用
res.addHeader("Access-Control-Allow-Methods", "*") //允许所有请求方式跨域调用

[非简单请求-带cookie的请求]

$.ajax({
    type: "get",
    url: "url",
    xhrFields: {
        withCredentials: true
    },
    success: function(json) {
        result = json;
    }
});

解决：带cookie时origin必须全匹配，不能使用 *

被调用放服务端增加设置Access-Control-Allow-Credentials

res.addHeader("Access-Control-Allow-Origin", "localhost:8081")
res.addHeader("Access-Control-Allow-Methods", "*")
res.addHeader("Access-Control-Allow-Credentials", "true") //enable cookie

[非简单请求-带header的请求]

$.ajax({
    type: "get",
    url: 'url",
    headers: {
        "x-header1": "AAA"
    },
    beforeSend: function(xhr) {
        xhr.setRequestHeader("x-header2", "BBB")
    },
    success: function(json) {
        result = json;
    }
});

解决：带cookie时origin必须全匹配，不能使用 *

被调用放服务端增加设置Access-Control-Allow-Header

res.addHeader("Access-Control-Allow-Origin", "*")
res.addHeader("Access-Control-Allow-Methods", "*")
res.addHeader("Access-Control-Allow-Header", "content-Type,x-header1,x-header2")

综上所述：

//带cookie的时候，origin必须是全匹配，不能使用*
String origin = req.getHeader("Origin");
if (!org.springframework.util.StringUtils.isEmpty(origin)) {
    res.addHeader("Access-Control-Allow-Origin", origin);
}
res.addHeader("Access-Control-Allow-Methods", "*");

// 支持所有自定义头和预检命令(非简单请求会有预检命令)
String headers = req.getHeader("Access-Control-Request-Headers");
if (!org.springframework.util.StringUtils.isEmpty(headers)) {
    res.addHeader("Access-Control-Allow-Headers", headers);         
}

res.addHeader("Access-Control-Max-Age", "3600");
// enable cookie
res.addHeader("Access-Control-Allow-Credentials", "true");

3. Nginx代理

如果我们请求的时候还是用前端的域名，Nginx帮我们把这个请求转发到真正的后端域名上

[Nginx配置]

server{
    # 监听9000端口
    listen 9000;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:9000/api这个样子的，都转发到真正的服务端地址http://localhost:9001
    location ^~ /api {
        proxy_pass http://localhost:9001;
    }    
}

简单请求&非简单请求

只要同时满足以下两大条件，就属于简单请求,其余属于非简单请求

（1) 请求方法是以下三种方法之一：HEAD、GET、POST

（2）HTTP的头信息不超出以下几种字段（无自定义头）：
  Accept
  Accept-Language
  Content-Language
  Last-Event-ID
(3)Content-Type：只限于三个值
  application/x-www-form-urlencoded
  multipart/form-data
  text/plain

码字不易，如果觉得对您有帮助，给个赞给一个小小的鼓励吧 (^.)!