本地Angular应用POST请求被CORS策略拦截 Postman调用正常

Postman、Thunder Client这类API调试工具不受浏览器同源策略约束，不会自动发起CORS预检请求，所以能正常拿到接口响应；浏览器环境下，你发起的Content-Type: application/json格式POST请求属于非简单请求，会先自动发送一个OPTIONS方法的预检请求，校验服务端CORS配置是否允许跨域调用，当前报错核心原因是服务端没有正确处理这个OPTIONS预检请求：

• 从Firefox报错的405状态码可以确认，后端IIS服务器虽然在POST响应头里声明了允许OPTIONS方法，但实际没有开放OPTIONS方法的路由处理，预检请求直接返回405 Method Not Allowed，没有返回符合要求的CORS响应头，浏览器判定预检失败，直接拦截后续实际POST请求
• 你贴出的CORS相关响应头都是POST主请求返回的，预检失败时浏览器根本不会走到发POST请求的步骤，这些头配置在当前报错场景下没有生效
• 现有配置存在一处隐患：access-control-allow-credentials: *属于无效CORS配置，当该字段值为true时不允许使用通配符匹配源，不过这个问题不是触发本次报错的核心原因。

方案1：本地开发阶段快速绕过（无需后端修改） #

利用Angular CLI内置的开发服务器代理，把接口请求转发到目标服务端，绕开浏览器同源校验，仅适用于本地开发调试：

1. 在Angular项目根目录（和angular.json同级）新建proxy.conf.json文件，写入以下配置：

{
  "/api": {
    "target": "https://blmbwebapi.weker.fr",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

2. 修改angular.json中开发服务的配置，找到projects -> [你的项目名] -> architect -> serve -> options节点，添加代理配置项：

"proxyConfig": "proxy.conf.json"

3. 修改服务中的接口地址为相对路径，去掉域名前缀：

public baseUrl = "/api/jobs/listJobs";

4. 重启本地开发服务ng serve，之后所有/api开头的请求都会被Angular开发服务器自动转发到目标API服务，浏览器侧因为请求的是同域（localhost:4200）地址，不会触发跨域拦截。

方案2：生产环境根治方案（需后端配合调整） #

生产环境如果前端静态资源和API服务不同域，还是会触发跨域校验，必须由后端调整服务配置：

• 给IIS/ASP.NET服务添加OPTIONS请求的统一处理逻辑：所有跨域预检的OPTIONS请求直接返回204 No Content状态码，响应中携带完整的CORS相关头，不要让OPTIONS请求走业务路由逻辑
• 修正CORS配置冲突：如果接口需要携带Cookie、Authorization等认证凭证，Access-Control-Allow-Credentials设为true的同时，Access-Control-Allow-Origin不能设为*，必须动态匹配请求的Origin值；如果不需要携带凭证，直接删除Access-Control-Allow-Credentials响应头即可
• 检查IIS是否安装了WebDAV模块，该模块默认会拦截OPTIONS、PUT等方法的请求返回405，未使用该模块的话可以直接在站点web.config中移除该模块的注册。

配置完成后打开浏览器开发者工具的网络面板，找到接口对应的OPTIONS请求，确认其状态码为200/204，且响应头携带正确的CORS字段，之后浏览器就会正常发送POST业务请求，不会再触发跨域拦截。

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