如何规避同源政策

Created: November-22, 2018

就客户端 JavaScript 引擎而言（在浏览器中运行的引擎），没有直接的解决方案可用于从当前域以外的来源请求内容。（顺便说一句，这种限制在诸如 Node JS 之类的 JavaScript 服务器工具中不存在。）

但是，（在某些情况下）确实可以使用以下方法从其他来源检索数据。请注意，其中一些可能会出现黑客或变通方法，而不是生产系统应该依赖的解决方案。

方法 1：CORS

如今，大多数公共 API 允许开发人员通过启用名为 CORS（跨源资源共享）的功能在客户端和服务器之间双向发送数据。浏览器将检查是否设置了某个 HTTP 标头（Access-Control-Allow-Origin），并且标头的值中是否列出了请求网站的域。如果是，那么浏览器将允许建立 AJAX 连接。

但是，由于开发人员无法更改其他服务器的响应标头，因此无法始终依赖此方法。

方法 2：JSONP

JSON 与 P 增加通常指责是一种解决方法。这不是最简单的方法，但它仍然可以完成工作。此方法利用了可以从任何域加载脚本文件的事实。但是，至关重要的是要提到从外部源请求 JavaScript 代码始终存在潜在的安全风险，如果有更好的解决方案，通常应该避免这种情况。

使用 JSONP 请求的数据通常是 JSON ，它恰好适合 JavaScript 中用于对象定义的语法，使得这种传输方法非常简单。让网站使用通过 JSONP 获得的外部数据的常用方法是将其包装在回调函数中，该函数通过 URL 中的 GET 参数设置。加载外部脚本文件后，将调用该函数，并将数据作为其第一个参数。

<script>
function myfunc(obj){
    console.log(obj.example_field);
}
</script>
<script src="http://example.com/api/endpoint.js?callback=myfunc"></script>

http://example.com/api/endpoint.js?callback=myfunc 的内容可能如下所示：

myfunc({"example_field":true})

必须首先定义该函数，否则在外部脚本加载时不会定义该函数。