Angular前端跨域请求被CORS拦截，但直接访问端点可返回数据

1. 错误在请求头中添加Access-Control-Allow-Origin #

Access-Control-Allow-Origin是服务器返回给浏览器的响应头，作用是告知浏览器允许哪些源发起跨域请求，完全不需要前端在请求里携带。你当前的做法不仅无效，还可能因为额外的自定义头触发浏览器更严格的预检校验逻辑。

2. 浏览器地址栏请求与前端AJAX请求的CORS规则差异 #

直接在浏览器地址栏输入URL属于「简单导航请求」，浏览器不会执行CORS校验；而Angular通过HttpClient发起的是AJAX请求（基于XMLHttpRequest/fetch），只要请求的协议、域名、端口任意一项与当前页面不同，浏览器就会强制触发CORS校验，校验不通过就会拦截响应。

3. 请求头设置引发预检请求失败 #

你设置了Content-Type: application/json，这属于非简单请求范畴，浏览器会先发送OPTIONS预检请求到服务器，询问是否允许该跨域请求。如果你的服务器没有配置处理OPTIONS请求，或者返回的响应头不符合CORS要求，预检就会失败，最终导致请求被拦截。

另外，服务器返回的是XML格式，但请求里声明Content-Type: application/json，这本身也是格式不匹配的问题，建议改成Accept: application/xml来明确告诉服务器你期望接收XML格式的响应。

4. withCredentials: true的额外约束 #

当你开启withCredentials: true时，服务器必须满足两个条件：

• 响应头Access-Control-Allow-Origin必须是具体的源（比如http://localhost:4200），不能使用通配符*
• 响应头必须包含Access-Control-Allow-Credentials: true

如果服务器没返回这些头，即使允许了源，带凭证的请求也会被浏览器拦截。

• 移除请求中的Access-Control-Allow-Origin头
• 将请求头的Content-Type改为Accept: application/xml（匹配服务器返回的XML格式），如果不需要特殊头，可直接去掉自定义头，让请求成为简单请求
• 配置服务器端CORS规则：
  • 允许http://localhost:4200作为合法跨域源
  • 处理OPTIONS预检请求，返回符合要求的CORS响应头
  • 如果使用withCredentials，确保返回Access-Control-Allow-Credentials: true且Access-Control-Allow-Origin为具体源

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