跨域请求的技能包：运用JSONP、CORS和代理解决跨域难题

前端

2022-11-25 11:51:34

跨域请求：突破域的界限

引言

在广阔的网络世界中，数据和资源分布在不同的服务器和域上。然而，当我们想要从一个域获取另一个域的内容时，会遇到一个棘手的障碍——跨域请求。

跨域请求的本质

跨域请求是指从一个域（称为源域）向另一个域（称为目标域）发送请求的行为。浏览器出于安全考虑，默认会阻止跨域请求，以防止恶意网站窃取敏感数据。

跨域请求的解决之道

为了突破跨域限制，有三种主要的解决之道：JSONP、CORS 和代理。

1. JSONP

JSONP（JSON with Padding）利用 <script> 标签的跨域特性来实现跨域请求。当源域请求一个 JSONP 文件时，目标域会在返回的 JSON 数据中包装一个回调函数，源域会执行此函数来处理数据。

// 源域
const script = document.createElement('script');
script.src = 'https://example.com/jsonp?callback=myCallback';
document.body.appendChild(script);

// 目标域
function myCallback(data) {
  // 处理数据
}

2. CORS

CORS（Cross-Origin Resource Sharing）是 W3C 制定的跨域请求标准。它允许浏览器在发送正式请求之前，向目标域发送一个预检请求，询问是否允许该请求。如果目标域允许，浏览器会继续发送正式请求。

// 源域
const request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api/data');
request.send();

// 目标域
// 响应预检请求
response.setHeader('Access-Control-Allow-Origin', 'https://source.com');

3. 代理

代理是一个中间服务器，它可以转发源域的请求到目标域。代理服务器会将目标域的响应转发回源域，从而绕过跨域限制。

// 源域
const request = new XMLHttpRequest();
request.open('GET', 'https://proxy.example.com/api/data');
request.send();

// 代理服务器
const targetRequest = new XMLHttpRequest();
targetRequest.open('GET', 'https://example.com/api/data');
targetRequest.send();

// 代理服务器
response.setHeader('Access-Control-Allow-Origin', 'https://source.com');