跨域问题指南：3 分钟速解

身处互联网世界的你是否曾经遭遇过恼人的跨域问题，浏览器死活不肯加载你的请求资源？别担心，让我们一起踏上这趟 3 分钟的旅程，彻底击溃跨域怪兽！

跨域问题产生的根源在于浏览器的同源策略，它像一位严厉的卫士，禁止不同源的资源（拥有不同协议、主机或端口号）相互访问，以保护用户数据安全。

当你的前端服务和后端 API 服务分处不同的域名之下，前端脚本就会触发跨域问题，浏览器会拒绝加载后端响应。此时，我们必须巧妙运用各种技术手段，让浏览器乖乖就范。

同源策略的例外：CORS

CORS（跨域资源共享）是一种灵活的机制，允许不同源的资源在满足特定条件的情况下进行跨域通信。要启用 CORS，后端服务器需要在响应头中添加以下信息：

• Access-Control-Allow-Origin: 允许的源域名
• Access-Control-Allow-Methods: 允许的请求方法
• Access-Control-Allow-Headers: 允许的请求头信息

跨域解决方案

除了 CORS 之外，还有其他解决跨域问题的方法：

• JSONP（JSON with Padding） : 利用 <script> 标签无视同源策略的特性，在后端返回 JSON 数据时用函数名包裹。
• WebSocket : 一种双向通信协议，不受同源策略限制。
• 代理服务器 : 将请求转发到不同源的服务器上，绕过同源策略。

选择最合适的解决方案

不同的跨域场景需要不同的解决方案：

• 简单请求 : 无需发送自定义请求头，使用 CORS 或 JSONP。
• 复杂请求 : 需要发送自定义请求头，使用 CORS。
• 实时通信 : 使用 WebSocket。

实例演示

让我们以 CORS 为例，在 Node.js 后端中添加以下代码：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

在前端中，使用以下 AJAX 请求：

$.ajax({
  url: 'https://example.com/api/v1/users',
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
});

现在，跨域问题将迎刃而解，浏览器将允许前端脚本加载后端响应。

结尾

通过本文，你已经掌握了跨域问题的原理和解决方案，快去实践，让你的跨域难题烟消云散吧！