跨域问题源于浏览器的同源策略（Same-Origin Policy），以下是常见解决方案：

1. 后端配置 CORS 头

在服务器响应中添加以下字段（以 Node.js 为例）：

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

✅ 推荐：通过后端控制跨域权限，更安全可控
🔗 点击了解 CORS 配置详解

2. 使用代理服务器

在开发环境搭建代理：

# 举例：Nginx 配置
location /api {
    proxy_pass https://target-domain.com;
}

🖼️

代理服务器

3. JSONP 跨域方案（仅限 GET 请求）

通过动态创建 <script> 标签实现： 

<script src="https://target-domain.com/api?callback=handleResponse"></script>

⚠️ 注意：JSONP 存在安全风险，不推荐用于敏感数据

4. 浏览器控制台调试

查看报错信息：

  • No 'Access-Control-Allow-Origin' header：说明未正确配置 CORS
  • Blocked by CORS policy：需检查请求头与响应头匹配度
    🖼️
    跨域问题

5. 开发工具建议

🔗 点击查看如何正确设置跨域请求头
📌 提示：使用 fetch 时需显式设置 mode: 'cors' 参数

📌 选择方案时需结合业务场景，生产环境建议优先使用 CORS 或代理服务器方案。