ajax解决跨域问题的常用方法

一、使用jsonp

前端ajax请求时，使用 jsonp 方式访问接口。原理为：浏览器允许有 src 属性的标签跨域请求，因此通过后台返回 script 文本包裹 json 数据的方式，实现跨域访问。

请求 Request Headers 和 Response Headers 示例：

服务端写法：

@RequestMapping(value = "/test", method = RequestMethod.GET)
@ResponseBody
public String test(@RequestParam("callback") String callback) {
    ObjectMapper objectMapper = new ObjectMapper();
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "23333");
    try {
        return callback + "(" + objectMapper.writeValueAsString(map) + ")";
    } catch (IOException e) {
        e.printStackTrace();
    }
    return "";
}

前端写法：

$.ajax({
    url: 'test.do',
    method: 'get',
    dataType: 'jsonp',
    jsonp: "callback",
    jsonpCallback:"fToHandler",
    success: function(data){},
    error: function(data){}
});

function fToHandler(data) {
    console.log("fToHandler");
    console.log(data.msg);
}

输出为：

或者可以直接在 success函数下执行：

$.ajax({
   url: 'test.do',
    method: 'get',
    dataType: 'jsonp',
    jsonp: "callback",
    jsonpCallback:"fToHandler",
    success: function(data){
        console.log("success");
        console.log(data.msg);
    },
    error: function(data){}
});

输出为：

二、CORS

CORS（cross origin resource share）即跨域资源共享，该方式只需在服务器端设置返回 header 即可：

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Origin", "http://wenglm.cn");

三、服务端 nginx 配置 Access-Control-Allow-Origin 允许跨域访问

参看： 阿里云ECS跨域问题

四、使用nginx反向代理

跨域问题是由于浏览器的CORS（cross origin resource share）策略的存在，不允许跨域的请求。

使用 nginx 反向代理，则可解决不同源的问题：配置之后，访问的是 nginx 代理服务器，是同一域名，为同源；再通过 nginx 把接口前缀修改之后转发，返回获取的数据值。

设置可参考：使用 nginx 作为代理服务器轻松解决 Ajax 跨域问题