Angular2请求足球数据API遇CORS错误，浏览器访问正常求原因

1. 为什么会突然出现这个CORS错误？ #

这个报错的核心是跨域预请求（OPTIONS请求）未通过。当你的Angular请求属于「非简单请求」时，浏览器会自动先发一个OPTIONS预请求，用来询问服务器：“我能不能携带这些请求头、用这个方法发起实际请求？”。如果服务器返回的Access-Control-Allow-Headers响应头里，没有包含你请求中使用的Content-Type，就会抛出这个错误。

通常Angular默认发送的POST请求会把Content-Type设为application/json，而这个类型不属于「简单请求」允许的范围（简单请求仅支持application/x-www-form-urlencoded、multipart/form-data、text/plain这三类Content-Type），所以必然触发预请求。如果服务器最近调整了CORS配置，移除了对Content-Type的允许，就会导致之前正常的请求突然报错。

2. 浏览器直接访问与Angular请求的核心区别 #

• 请求类型与头信息：浏览器直接输入URL发送的是GET请求，没有自定义的Content-Type头（或默认是简单类型），属于「简单请求」，不会触发预请求，服务器直接返回内容即可。而Angular的请求（比如POST）可能携带了application/json这类非简单的Content-Type，从而触发预请求校验。
• 预请求机制：浏览器直接访问的GET请求跳过了预请求步骤，而Angular的非简单请求必须先通过OPTIONS预请求的校验，才会发送实际的业务请求。
• 附加头差异：如果你的Angular请求还添加了其他自定义头（比如Authorization），也会让请求升级为非简单请求，进一步触发预请求。

3. 为什么Chrome的CORS扩展没起作用？ #

很多CORS扩展的原理是修改浏览器请求头或拦截响应头，但它们对预请求的处理可能存在漏洞：

• 部分扩展只处理实际的业务请求，忽略了OPTIONS预请求，导致预请求失败后直接报错。
• 服务器返回的Access-Control-Allow-Headers是明确的限制规则，有些扩展无法强制覆盖这个响应头，因此预请求依旧无法通过。

可行的解决办法 #

• 调整Angular请求的Content-Type：如果你的请求不需要发送JSON数据，把Content-Type改成简单类型。比如用HttpHeaders设置：

  const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');
  this.http.post(url, body, { headers: headers });
  

  如果是GET请求，完全不需要手动设置Content-Type，让浏览器使用默认值即可。
• 移除多余的自定义头：如果请求中添加了不必要的自定义头，直接删除，让请求变回简单请求。
• 更换或调整CORS扩展：试试禁用当前的CORS扩展，换用更可靠的（比如「Allow CORS: Access-Control-Allow-Origin」这类常用款），或者检查扩展设置是否开启了对预请求的支持。

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