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

刺骨的言语ヽ痛彻心扉 2022-09-26 01:51 191阅读 0赞

## 一、使用jsonp ##

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

请求 Request Headers 和 Response Headers 示例：

![这里写图片描述][20160914185211296]

服务端写法：

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

输出为：  
![这里写图片描述][20160914184904223]

或者可以直接在 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){ }
    });

输出为：  
![这里写图片描述][20160914184851466]

## 二、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跨域问题][_ECS]

## 四、使用nginx反向代理 ##

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

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

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

[20160914185211296]: /images/20220717/9e372919209e422bb36aae877c494d0e.png
[20160914184904223]: /images/20220717/9bce19a65d504cdd93f4c270f4f53472.png
[20160914184851466]: /images/20220717/9a60f66da4c547398c8e7577a8368bf0.png
[_ECS]: http://blog.csdn.net/u012099869/article/details/50913216
[nginx _ Ajax]: http://wenzhixin.net.cn/2012/08/01/the_use_of_nginx_as_a_proxy_server_easily_solve_the_cross_domain_ajax_problem