跨域问题深度剖析：为何CORS设置了还是报错？

问题背景

最近在项目中遇到了一个棘手的跨域问题：B域名的网页被嵌入在A域名内部，B域名的接口请求也出现了跨域错误。尽管后端同学已经配置了Access-Control-Allow-Origin等CORS相关头部，但控制台仍然持续报跨域错误。

问题排查过程

初步排查

一开始我们按照常规跨域问题的排查思路：

检查后端CORS配置是否正确
验证Access-Control-Allow-Origin头是否包含A域名
确认Access-Control-Allow-Credentials设置为true

但所有这些配置都正确，问题依然存在。

深入分析

经过仔细排查，发现了问题的本质：B域名没有成功携带A域名的Cookie，导致请求被服务端的passport权限拦截中间件拦截，从而触发了跨域错误。

这里的关键点是：即使后端正确配置了CORS，如果请求因为权限问题被前端中间件拦截，同样会表现为跨域错误。

解决方案

方案一：种植Cookie方案

javascript

javascript 复制代码

// B页面中的请求处理
function makeRequest() {
  const xhr = new XMLHttpRequest();
  
  // 关键：添加x-requested-with头，阻止浏览器自动处理302重定向
  xhr.setRequestHeader('x-requested-with', 'XMLHttpRequest');
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 302) {
        // 手动处理302重定向
        const redirectUrl = window.location.href;
        window.location.href = `/sso/logon?redirectUrl=${encodeURIComponent(redirectUrl)}`;
      } else if (xhr.status === 200) {
        // 正常处理响应
        console.log('请求成功', xhr.responseText);
      }
    }
  };
  
  xhr.open('GET', '/api/data', true);
  xhr.send();
}

后端配合调整：

java

vbscript 复制代码

// 当检测到x-requested-with头时，不自动重定向
if ("XMLHttpRequest".equals(request.getHeader("x-requested-with"))) {
    response.setStatus(302);
    response.setHeader("Location", ""); // 清空或不设置Location头
    // 通过其他方式传递重定向URL，如响应体
} else {
    response.sendRedirect("/sso/logon?redirectUrl=" + url);
}

方案缺陷：

部分浏览器出于安全策略考虑，禁止跨域名种植Cookie
实现相对复杂，需要前后端协同调整

方案二：同源部署方案（推荐）

将B页面的模板直接部署到A域名的服务器上，从根本上消除跨域问题。

实施步骤：

将B页面的前端资源打包部署到A域名服务
调整路由配置，确保B页面的访问路径在A域名下
更新所有相关的资源引用路径

nginx

bash 复制代码

# Nginx配置示例
server {
    listen 80;
    server_name a-domain.com;
    
    location /b-page/ {
        # 代理到B页面服务或直接服务静态资源
        proxy_pass http://b-service/;
        # 或者直接服务本地文件
        root /path/to/b-page-static-files;
    }
    
    location /api/ {
        proxy_pass http://b-api-service/;
    }
}

优势：

彻底解决跨域问题
Cookie自然共享，无需特殊处理
更好的性能和用户体验

技术要点总结

1. CORS与Cookie的关系

跨域请求默认不携带Cookie
需要设置withCredentials: true（前端）和Access-Control-Allow-Credentials: true（后端）
Access-Control-Allow-Origin不能为*，必须指定具体域名

2. 302重定向的Ajax处理

默认情况下，浏览器会自动处理302重定向，前端无法拦截
通过x-requested-with: XMLHttpRequest头告知后端需要特殊处理
后端据此决定是否让前端手动处理重定向

3. 跨域问题的本质

跨域问题不仅仅是技术配置问题，更是安全策略的体现。浏览器的同源策略是为了保护用户数据安全。

经验教训

不要盲目相信错误信息：跨域错误可能是其他问题的表象
系统化排查：从前端到后端，从网络到安全策略全面排查
优先选择根本解决方案：相比各种workaround，从架构层面解决问题更可靠

结语

跨域问题是前端开发中的常见挑战，理解其背后的原理和浏览器安全策略至关重要。通过这次问题的解决，我们不仅修复了bug，更重要的是加深了对Web安全机制的理解。