跨域问题 | FreezeJ' Blog

由于浏览器同源策略限制，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

如何解决跨域

JSONP

利用html的<script>标签的src属性，该属性没有跨域限制，但具有局限性，只能发送get请求。原理相当于请求一段外部拼装好的JavaScript代码并执行。

DEMO代码：

<html lang="en">
<head>
    <title>JSONP测试</title>
</head>
<body>
    <script>
        function test(data){
            console.log(data);
        }
    </script>
    <script src="https://www.durongjie.com/js/jsonp.js"></script>
</body>
</html>

请求内容(可执行的js代码)：

test({
  "test": 123
})

该内容可以由一个接口动态返回，这样就实现了跨域请求外部资源（数据）。

CORS跨域资源共享

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

Nginx配置CORS：

location / { 
    # 省略其它
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
}

更详细的的说明可以参考：https://www.ruanyifeng.com/blog/2016/04/cors.html

Tags: JavaScript

← python函数缓存装饰器lru_cache cryptography实现对称加密 →