返回

跨域请求和解决方案

前端

跨域请求

跨域请求是指从一个源（协议、域名、端口）向另一个源发送HTTP请求。例如，如果一个网页从http://example.com加载，它不能向https://google.com发送HTTP请求。这是因为浏览器出于安全的考虑，引入了同源策略。

同源策略

同源策略是一项安全策略，它限制了跨域请求。同源策略规定，只有来自相同源的脚本才能访问彼此的DOM结构和窗口对象。例如，如果一个脚本从http://example.com加载，它不能访问https://google.com的DOM结构和窗口对象。

跨域请求的解决方案

有几种方法可以解决跨域请求的问题：

  • CORS

CORS（Cross-Origin Resource Sharing）是一种允许跨域请求的机制。CORS允许服务器端指定哪些源可以跨域访问资源。例如，如果一个服务器端想允许http://example.com跨域访问资源，它可以在响应头中添加以下内容：

Access-Control-Allow-Origin: http://example.com
  • JSONP

JSONP（JSON with Padding）是一种允许跨域请求的技巧。JSONP使用<script>标签来加载跨域资源。例如，如果一个网页想从https://google.com加载JSON数据，它可以插入以下代码：

<script src="https://google.com/api/data?callback=myCallback"></script>

当https://google.com/api/data加载完成后，它会调用myCallback函数。myCallback函数可以访问跨域资源。

  • 隧道代理

隧道代理是一种允许跨域请求的技术。隧道代理是一个服务器端程序，它可以将HTTP请求从一个源转发到另一个源。例如，如果一个网页想从https://google.com加载JSON数据，它可以将请求发送到隧道代理。隧道代理会将请求转发到https://google.com，并返回响应给网页。

  • Iframe

Iframe是一种允许跨域请求的HTML元素。Iframe可以加载跨域资源。例如，如果一个网页想从https://google.com加载JSON数据，它可以插入以下代码：

<iframe src="https://google.com/api/data"></iframe>

Iframe会加载https://google.com/api/data，并返回响应给网页。

  • WebSocket

WebSocket是一种允许跨域请求的协议。WebSocket是一种双向通信协议，它允许客户端和服务器端实时通信。WebSocket可以使用以下代码建立连接：

var ws = new WebSocket("ws://example.com/api/data");

一旦连接建立，客户端和服务器端就可以实时通信。