跨域 请求 ajax实现跨域请求的方法与常见问题解析

从踩坑到填坑的实战指南

"老张，我前端调用后端接口怎么老是报跨域错误啊？"小王挠着头一脸困惑，这种场景在前端开发中太常见了——明明本地测试好好的，一对接就各种跨域报错,今天咱们就来彻底搞懂这个让无数前端开发者头疼的跨域问题。

跨域到底是什么鬼？

当你的网页在https://www.a.com，却要去请求https://api.b.com的数据时，浏览器就会跳出来说："不行！这违反了同源策略！"这就是跨域问题。

同源策略要求三个一致：

• 协议相同（http/https）
• 域名相同
• 端口相同

哪怕只是http和https的区别，或者www.a.com和a.com的差别，甚至是同一个域名下3000端口和8080端口的区别,都会被浏览器视为不同源。

解决跨域的五大实战方案

CORS：最正经的官方解决方案

CORS（跨域资源共享）是目前最推荐的解决方案,后端同学加几个响应头就能搞定：

// Node.js Express示例
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, Authorization");
  next();
});

常见坑点：

• 复杂请求（如Content-Type为application/json的POST请求）会先发OPTIONS预检请求
• 带cookie的请求不能使用通配符，必须指定具体域名
• 后端记得处理OPTIONS请求，直接返回204就行

JSONP：老古董的曲线救国

虽然现在用得少了,但在某些特殊场景下还是能派上用场：

function handleResponse(data) {
  console.log('收到数据:', data);
}
const script = document.createElement('script');
script.src = 'https://api.b.com/data?callback=handleResponse';
document.body.appendChild(script);

致命缺点：

• 只支持GET请求
• 安全性差，相当于把后端接口完全暴露
• 错误处理困难

代理转发：开发环境的好帮手

在本地开发时，webpack-dev-server可以轻松配置代理：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.b.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

适用场景：

• 开发环境快速解决问题
• 后端暂时无法修改CORS配置时的临时方案

Nginx反向代理：生产环境的标配

server {
    listen 80;
    server_name mydomain.com;
    location /api/ {
        proxy_pass https://api.b.com/;
        add_header 'Access-Control-Allow-Origin' '*';
    }
}

优势：

• 前端无需任何修改
• 可以统一管理多个后端服务的代理
• 性能影响小

WebSocket：跨域的长连接方案

const socket = new WebSocket('wss://api.b.com');
socket.onopen = () => {
  socket.send('Hello Server!');
};
socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

适用场景：

• 实时性要求高的应用
• 聊天室、股票行情等

那些年我们踩过的跨域坑

cookie死活带不过去

症状：明明设置了withCredentials，cookie还是丢失

解法：

// 前端
axios.defaults.withCredentials = true;
// 后端
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Origin", "https://your-frontend-domain.com"); // 必须明确指定域名

预检请求OPTIONS报错

症状：控制台报OPTIONS 404或405错误

解法：

// Express中间件
app.options('*', (req, res) => {
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.status(204).send();
});

跨域请求被浏览器拦截

症状：控制台报has been blocked by CORS policy错误

可能原因：

• 后端没正确设置CORS头
• 请求头包含了不在Access-Control-Allow-Headers中的自定义头
• 请求方法不被允许

安全注意事项

1. 不要随意设置Access-Control-Allow-Origin: *，特别是对敏感接口
2. 带cookie的请求一定要限制来源域名
3. 考虑添加Access-Control-Max-Age减少预检请求
4. 对于敏感操作，还是要做CSRF防护

2025年的跨域新动向

根据2025年8月的最新浏览器支持情况：

• Chrome和Firefox已经全面支持CORS的Partitioned属性，可以更细粒度控制跨域资源
• 新的Origin-Isolation标头提供了更强的隔离机制
• WebTransport协议开始普及，可能成为WebSocket的替代方案

写在最后

跨域问题就像前端的"必修课"，看似简单实则暗藏玄机，掌握了这些方法，下次再遇到跨域报错，你就能淡定地说："小样，看我怎么收拾你！"没有最好的跨域方案,只有最适合当前场景的解决方案。