AJAX中怎么利用 CORS解决跨域

发布时间：2021-07-29 17:37:22 作者：Leah
来源：亿速云阅读：269

# AJAX中怎么利用 CORS解决跨域

## 一、跨域问题的本质

### 1.1 什么是跨域
跨域问题源于浏览器的**同源策略**（Same-Origin Policy），该策略限制了一个源的文档或脚本如何与另一个源的资源进行交互。当协议、域名或端口任一不同时，即视为跨域。

示例场景：
- `http://a.com` 请求 `http://b.com/api` → 跨域
- `https://a.com` 请求 `http://a.com` → 跨域（协议不同）
- `http://a.com:8080` 请求 `http://a.com:3000` → 跨域（端口不同）

### 1.2 传统解决方案的局限性
早期开发者常使用以下方式绕过限制：
- **JSONP**：仅支持GET请求
- **代理服务器**：增加架构复杂度
- **iframe hack**：安全性差

这些方案都存在明显缺陷，而CORS提供了标准化的解决方案。

---

## 二、CORS机制详解

### 2.1 CORS工作原理
跨源资源共享（CORS）通过新增HTTP头来实现跨域访问控制。其核心流程分为：

1. **简单请求**（Simple Request）
   - 条件：GET/HEAD/POST方法，且Content-Type为`text/plain`、`multipart/form-data`或`application/x-www-form-urlencoded`
   - 浏览器自动添加`Origin`头，服务器响应需包含：
     ```http
     Access-Control-Allow-Origin: http://yourdomain.com
     ```

2. **预检请求**（Preflight Request）
   - 非简单请求时，浏览器先发送OPTIONS请求
   - 关键头部：
     ```http
     Access-Control-Request-Method: PUT
     Access-Control-Request-Headers: X-Custom-Header
     ```
   - 服务器需响应：
     ```http
     Access-Control-Allow-Methods: GET, POST, PUT
     Access-Control-Allow-Headers: X-Custom-Header
     Access-Control-Max-Age: 86400  // 缓存时间
     ```

### 2.2 凭证与缓存控制
- **携带Cookie**：需设置
  ```javascript
  xhr.withCredentials = true;

且服务器响应：

  Access-Control-Allow-Credentials: true
  Access-Control-Allow-Origin: http://yourdomain.com  // 不能为*

缓存优化：
```
Access-Control-Max-Age: 3600
```

三、服务端配置实战

3.1 Node.js示例

const express = require('express');
const app = express();

// 中间件处理CORS
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://client.com');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ data: 'CORS enabled response' });
});

3.2 Nginx配置

location /api/ {
  if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' 'http://client.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With';
    add_header 'Access-Control-Max-Age' 1728000;
    return 204;
  }

  add_header 'Access-Control-Allow-Origin' 'http://client.com';
  add_header 'Access-Control-Allow-Credentials' 'true';
  proxy_pass http://backend;
}

四、前端AJAX实现

4.1 原生XHR示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.other.com/data');
xhr.withCredentials = true;

xhr.onload = function() {
  console.log(xhr.responseText);
};

xhr.send();

4.2 Fetch API示例

fetch('http://api.other.com/data', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  }
})
.then(response => response.json())

4.3 错误处理

需捕获可能的CORS错误：

try {
  await fetch('http://api.com/data');
} catch (err) {
  if (err.name === 'TypeError' && err.message.includes('Failed to fetch')) {
    console.error('CORS策略阻止了请求');
  }
}

五、安全注意事项

严格限制来源：

避免使用通配符*

动态白名单示例：


const allowedOrigins = ['http://site1.com', 'http://site2.com'];
if (allowedOrigins.includes(req.headers.origin)) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
}

敏感接口防护：
- 重要API建议保持同源
- 结合CSRF Token等机制
预检缓存控制：
- 合理设置Access-Control-Max-Age
- 避免过长缓存导致安全策略失效

六、调试技巧

Chrome开发者工具：
- Network标签查看CORS相关头部
- 控制台错误消息分析

CORS测试工具：

curl -H "Origin: http://test.com" -I http://api.com/data

常见错误解决：
- No 'Access-Control-Allow-Origin' header → 检查服务端配置
- Credentials模式下的Origin不能为* → 指定具体域名

结语

CORS作为现代Web开发的标准跨域方案，既保障了安全性又提供了灵活性。正确理解其机制并合理配置，可以高效解决80%以上的跨域问题。对于更复杂的场景（如WebSocket跨域），可结合其他方案进行补充。

最佳实践建议：开发环境可适当放宽限制，生产环境务必严格配置来源白名单。 “`

注：本文实际约1500字，可根据需要调整代码示例的详细程度。建议读者通过实际动手测试来加深理解。