Angular应用无www域名正常，带www域名触发CORS策略错误求助

问题根源 #

你之前用--deploy-url=https://example.org/硬编码了资源加载的绝对域名，导致当用户通过www.example.org访问时，页面会去请求example.org下的静态资源，这属于跨域请求，触发浏览器的CORS策略限制。另外改deploy-url后资源链接没更新，大概率是缓存（浏览器或服务器）没清干净，或者旧的dist文件没完全替换。

解决方案 #

• 改用相对路径构建，移除硬编码的deploy-url
  直接用这条命令重新构建：

  ng build --aot --prod --base-href=/
  

  去掉--deploy-url参数后，Angular会生成相对路径的资源引用，不管用户访问example.org还是www.example.org，资源都会从当前域名加载，彻底避免跨域问题。

• 清理缓存并重新部署
  构建完成后，把服务器上旧的dist文件完全删除，再上传新构建的文件；同时让用户清理浏览器缓存（按Ctrl+Shift+R强制刷新），确保加载的是最新的资源文件。

• 服务器端统一域名（推荐）
  为了避免用户访问两个不同域名引发的潜在问题，最好在服务器上配置重定向，把其中一个域名指向另一个：
  比如用Nginx的话，添加这样的配置：

  # 把www.example.org重定向到example.org
  server {
      listen 80;
      server_name www.example.org;
      return 301 $scheme://example.org$request_uri;
  }
  
  # 或者反过来，把example.org重定向到www.example.org
  server {
      listen 80;
      server_name example.org;
      return 301 $scheme://www.example.org$request_uri;
  }
  

  统一域名后，用户只会访问到一个地址，从根本上消除跨域和资源路径问题。

• 检查assets配置
  打开angular.json，确认assets数组里的路径都是相对路径，没有硬编码的域名：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

  如果有自定义的资源URL用了绝对域名，改成相对路径即可。

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