网站可发起请求但复制Fetch后触发CORS错误，求解释

核心差异：两种请求的跨域规则不同 #

你遇到的问题本质是浏览器对「页面资源加载请求」和「主动发起的Fetch/XHR跨域请求」执行完全不同的同源策略规则：

• 原页面的请求（无CORS错误）：
  你在网络面板看到的ux.example.com请求，大概率是页面通过<script>、<img>、<link>这类标签加载资源（比如脚本、样式、图片）。这类请求属于浏览器的同源策略豁免场景——浏览器允许跨域加载这类资源，但会限制JS代码无法读取响应内容（除非是JSONP这类特殊方案），因此不需要目标服务器返回Access-Control-Allow-Origin头，请求就能正常完成，网络面板也会显示请求成功。

• 控制台执行的Fetch请求（触发CORS错误）：
  当你把请求复制为Fetch代码在控制台执行时，这属于主动发起的跨域AJAX请求。这类请求受严格的CORS规则约束：浏览器会在请求完成后检查目标服务器返回的响应头，必须存在Access-Control-Allow-Origin且值匹配当前源（https://www.example.com），否则浏览器会拦截响应，不允许你的JS代码访问数据，同时抛出你看到的CORS错误。

补充说明 #

1. 网络面板记录的是浏览器实际发送/接收的请求，不管是否被CORS拦截，所以你能看到原请求的完整轨迹，但这并不代表JS代码能拿到响应内容。
2. 原网站可能用了其他跨域方案（比如JSONP、服务器端代理）来避开前端的CORS限制，但你复制的是客户端侧的请求逻辑，自然触发浏览器的安全校验。

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