仅在URL带www前缀时出现CORS错误的技术咨询

嘿，这个问题我之前帮团队排查过类似的，太懂这种踩坑的感觉了！本质原因很简单：浏览器把example.com和www.example.com当成了完全不同的源——哪怕它们指向同一个服务器！

浏览器的同源策略要求协议、域名、端口三者完全一致才算同源，example.com（主域名）和www.example.com（子域名）的域名部分不匹配，所以当你用www域名访问页面时，页面里指向主域名的资源请求就会触发CORS拦截。

下面给你几个实用的解决方案，按推荐优先级排序：

1. 统一全站域名（最彻底的方案） #

直接通过服务器配置做301永久重定向，把其中一个域名跳转到另一个，让用户不管输入哪个，最终都访问同一个源。比如：

• 如果你想统一用www版本，Nginx配置示例：

server {
    listen 80;
    server_name example.com;
    # 把所有无www的请求跳转到www版本，保留原请求路径
    return 301 http://www.example.com$request_uri;
}

• 如果你想统一用无www版本，反过来配置即可：

server {
    listen 80;
    server_name www.example.com;
    return 301 http://example.com$request_uri;
}

这样从根源上消除了跨源的可能，还能提升SEO效果（避免重复内容）。

2. 配置动态CORS响应头（保留双域名的场景） #

如果业务必须同时支持两个域名，那需要在服务器端动态设置Access-Control-Allow-Origin头，允许这两个源的请求。

Node.js/Express示例： #

app.use((req, res, next) => {
  // 允许的源列表
  const allowedOrigins = ['http://example.com', 'http://www.example.com'];
  const requestOrigin = req.headers.origin;
  
  // 仅允许列表内的源
  if (allowedOrigins.includes(requestOrigin)) {
    res.setHeader('Access-Control-Allow-Origin', requestOrigin);
  }
  // 允许的请求方法和头
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 如果需要带Cookie请求，还要加这行
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

Nginx示例： #

# 动态设置允许的源
add_header Access-Control-Allow-Origin $http_origin always;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
add_header Access-Control-Allow-Credentials "true" always;

# 直接返回204处理OPTIONS预检请求
if ($request_method = OPTIONS) {
    return 204;
}

⚠️ 注意：如果请求需要带Cookie，Access-Control-Allow-Origin不能设为*，必须指定具体的源，同时前端请求要开启withCredentials: true。

3. 修正页面资源引用路径 #

检查页面里的资源（JS、CSS、API请求）是否硬编码了特定域名。比如把<script src="http://example.com/app.js">改成相对路径<script src="/app.js">，或者用协议相对路径<script src="//example.com/app.js">（如果统一域名的话）。这样不管当前访问的是带www还是不带www的域名，都会请求当前域名下的资源，避免跨源。

额外注意事项 #

• 测试前清空浏览器缓存，301重定向会被浏览器缓存，可能导致测试结果不准确；
• 如果用了CDN，要确保CDN的CORS配置和服务器端保持一致；
• 优先选择统一域名的方案，长期维护更省心，也能避免其他潜在的跨域问题。

内容的提问来源于stack exchange，提问作者Remy