AJAX跨域问题讲解-CFANZ编程社区

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

[ 产生跨域的原因 ]

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

[ 解决跨域问题的思路 ]

跨域问题解决办法

1. JSONP解决跨域

[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

[简单请求-post请求]

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;
    }
});

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;
    }
});

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配置]

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