同源策略和几种常用的跨域资源访问的方式

超、凢脫俗 2022-04-24 09:38 82阅读 0赞

## Bug ##

Access to XMLHttpRequest at 'http://localhost:8080/GetUsers' from origin 'null' has been blocked by CORS policy: 
    No 'Access-Control-Allow-Origin' header is present on the requested resource.

## Concepts ##

*  [同源策略(same-origin-policy)][same-origin-policy]限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
 *  [CORS(Cross-Origin Resource Sharing)跨域资源共享][CORS_Cross-Origin Resource Sharing]是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
 *  [CSRF(Cross Site Request Forgery)跨站请求伪造][CSRF_Cross Site Request Forgery]
 *  [JSONP(JSON with Padding)][JSONP_JSON with Padding]

## 解决跨域资源访问的几种方式 ##

*  在服务端设置响应头的`Access-Control-Allow-Origin`选项  
    后端：

response.setContentType("text/json; charset=UTF-8");
    
    response.setHeader("Access-Control-Allow-Origin", "*");   // 跨域访问
    String retData = JSON.toJSONString(userList);   // userList为要返回的数据(object)，转换为JSON字符串。
    
    PrintWriter writer = response.getWriter();
    writer.write(retData);
    writer.close();

浏览器端脚本：

$.ajax(url, {
        var url = "http://localhost:8080/GetUsers",
        dataType: 'json',
        success: function(result) {
            console.log("成功", result);
        },
        error: function(jq) {
            console.log("失败", jq);
        }
    });

服务端设置响应头的`Access-Control-Allow-Origin`对客户端来说不现实，并且不够安全(对服务器而言)。  
所以可以在客户端想办法解决：

*  `JSONP` (JSON with Padding)  
    `JSON`常用于数据传输，而`JSONP`用于解决**跨域资源访问**的问题。  
    后端：

response.setContentType("text/json; charset=UTF-8");
    
    String callback = request.getParameter("callback");
    String retData = String.format("%s(%s)", callback, JSON.toJSONString(userList));
    
    PrintWriter writer = response.getWriter();
    writer.write(retData);
    writer.close();

前端发送JSONP请求：  
设置`dataType: 'jsonp'`，另设置`jsonp`，值为函数名称(会作为查询参数的名称)。

$.ajax({
        type: "get",
        url: "http://localhost:8080/GetUsers",
        dataType: "jsonp",  /* dataType: 设置返回的数据类型 */
        jsonp: "callback",  /* jsonp: jQuery生成查询参数对的参数名称paramName，默认为callback。 */
        success: function(result) {
            console.log("成功", result);
        },
        error: function(jq) {
            console.log("失败", jq);
        }
    });

运行截图见：[用AJAX发送JSONP请求解决跨域资源访问][AJAX_JSONP]

[same-origin-policy]: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
[CORS_Cross-Origin Resource Sharing]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
[CSRF_Cross Site Request Forgery]: https://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/index.html
[JSONP_JSON with Padding]: http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
[AJAX_JSONP]: https://blog.csdn.net/wuyujin1997/article/details/89462201