使用AngularJS加载同域CSS时出现Origin 'null'跨域访问错误求助

你遇到的这个问题确实有点反直觉——明明请求的是同域名资源，却触发了CORS错误，还显示来源为null。结合你用AngularJS $http.get的场景，我整理了几个最可能的原因和对应的解决办法：

1. 你是不是直接打开本地HTML文件了？ #

这是最常见的导致来源为null的原因：如果你的页面是通过file:///协议（直接双击本地HTML文件打开）访问的，浏览器会把页面的来源标记为null。哪怕你请求的是https://complice.co的资源，file://和https://属于完全不同的来源，自然会触发跨域限制。

解决办法：把你的前端代码部署到HTTP服务器上，用http://或https://协议访问页面，比如用本地的http-server、nginx，或者部署到线上服务器，这样页面的来源就会和请求的CSS资源域名一致了。

2. 请求被悄悄重定向到了其他来源 #

有时候服务器会做301/302重定向，比如把https://complice.co/m/user.css重定向到http://complice.co/m/user.css（协议变了），或者重定向到某个子域名比如https://cdn.complice.co/...。这种情况下，实际请求的资源地址和你页面的来源不一致，就会触发跨域错误，而浏览器报错里显示的是你最初请求的URL，容易误导你。

排查方法：打开浏览器开发者工具（F12）→ 切换到「Network」标签，重新加载页面，找到user.css的请求，查看它的「Status Code」如果是3xx，再看「Location」响应头，确认最终跳转的URL是不是和页面域名完全一致（包括协议、域名、端口）。

解决办法：调整服务器的重定向规则，确保重定向后的资源地址和页面来源一致；或者直接请求重定向后的最终地址。

3. AngularJS的$http配置被无意中修改了 #

虽然你说没改代码，但可能有其他模块或第三方库修改了$httpProvider的默认配置，比如：

// 开启withCredentials会让浏览器把请求视为跨域请求
$httpProvider.defaults.withCredentials = true;
// 添加非标准的请求头也会触发预检请求
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

当请求触发预检（OPTIONS）请求时，如果服务器没有正确配置Access-Control-Allow-Origin等CORS头，就会报错。

排查方法：暂时注释掉所有自定义的$http配置，测试请求是否恢复正常。如果恢复了，再逐步排查是哪项配置导致的问题。

4. 服务器端CORS配置临时变更 #

哪怕你没改前端代码，服务器端可能更新了Nginx/Apache配置，或者CDN缓存了错误的响应头，导致原本允许同域请求的Access-Control-Allow-Origin头被移除或设置错误。

排查方法：用curl命令测试CSS资源的响应头：

curl -I https://complice.co/m/user.css?3239

查看返回的响应头里有没有Access-Control-Allow-Origin，如果没有或者值不是*或你的页面域名，那就是服务器端的问题，需要运维人员调整配置。

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