前端跨域问题与解决方法全攻略

前端

2023-10-28 11:30:43

揭秘跨域：前端开发中的常见问题及解决之道

什么是跨域？

当两个不同网站（又称域）之间的脚本试图沟通时，就会发生跨域问题。为了保证网络安全，浏览器实施了同源策略，禁止不同域之间的直接交互。简单来说，来自 "example.com" 域的脚本无法访问 "example.org" 域上的资源。

跨域的影响

跨域问题会阻碍前端应用程序的许多功能，例如：

发送 AJAX 请求
建立 WebSocket 连接
载入外部脚本

解决跨域问题的方案

解决跨域问题有多种途径，每种都有自己的优点和缺点：

1. CORS（跨域资源共享）

CORS 是一种浏览器机制，允许不同源的脚本在特定条件下进行通信。它通过一个预检请求来询问目标服务器是否允许跨域访问，并通过响应头获得允许或拒绝的回复。

代码示例：

const request = new Request('https://example.org/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  mode: 'cors',
});
fetch(request).then(response => {
  console.log(response);
});

2. JSONP（JSON with Padding）

JSONP 是一种利用 <script> 标签在不同源之间传递数据的技术。它将数据包装在回调函数中，并通过创建一个 <script> 标签来载入目标服务器的 URL。

代码示例：

<script src="https://example.org/api/data?callback=myCallback"></script>

function myCallback(data) {
  console.log(data);
}

3. 代理

代理服务器充当不同源应用程序之间的中介。客户端向代理发送请求，代理将请求转发到目标服务器，然后将响应转发给客户端。

代码示例：

const proxyUrl = 'https://myproxy.com/';
const targetUrl = 'https://example.org/api/data';

const proxyRequest = new Request(proxyUrl + targetUrl, {
  method: 'GET',
});
fetch(proxyRequest).then(response => {
  console.log(response);
});