Angular 4/ASP.NET跨域请求报错：No 'Access-Control-Allow-Origin'问题咨询

嘿，我来帮你搞定这个头疼的跨域报错！你遇到的情况特别典型：Postman能正常访问API，但Angular客户端不行，核心问题出在浏览器的同源策略和API服务器没正确处理预检请求上。

为什么Postman正常但Angular不行？ #

Postman作为API调试工具，不受浏览器同源策略的限制，也不会自动发送OPTIONS预检请求。但浏览器会对跨域的非简单请求（比如带自定义头、非GET/POST的请求）先发送一个OPTIONS预检请求，用来确认服务器是否允许跨域访问。你的API服务器现在：

• 没正确处理这个OPTIONS请求，返回了405（方法不允许）状态码
• 响应里也没有Access-Control-Allow-Origin头，导致浏览器直接判定跨域访问不被允许

解决方案（按推荐程度排序） #

1. 后端服务器配置CORS（生产环境首选）

这是最根本的解决办法，需要在API服务器端添加CORS支持：

• 允许来自http://localhost的跨域请求（或者根据需求设为*允许所有源）
• 专门处理OPTIONS预检请求，返回200状态码
• 配置必要的CORS响应头，比如：
  • Access-Control-Allow-Origin: http://localhost
  • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
  • Access-Control-Allow-Headers: Content-Type, Authorization（如果你的请求带自定义头，要把这些头加进去）

举个Node.js + Express的例子，用cors中间件快速配置：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost',
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type']
}));

2. Angular本地代理（开发环境临时方案）

开发阶段可以用Angular的代理配置绕过浏览器的CORS检查，步骤很简单：

1. 在项目根目录创建proxy.conf.json文件，替换成你的API地址：

{
  "/api": {
    "target": "https://your-api-domain.com",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": { "^/api": "" }
  }
}

2. 修改angular.json里的serve配置，添加代理指向：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project:build",
    "proxyConfig": "proxy.conf.json" // 新增这一行
  }
}

3. 重启Angular开发服务器，之后调用API时用相对路径：

// 之前的完整URL：https://your-api-domain.com/xxx
// 现在改成相对路径：
this.http.get('/api/xxx', { params: params, headers: headers });

3. 浏览器临时禁用CORS（仅测试用，禁止生产环境）

这个方法只适合本地临时测试，绝对不能用于生产：

• 关闭所有Chrome窗口，用命令行启动Chrome并添加参数：

  chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
  

  （Mac/Linux可以调整路径和启动命令）
• 注意：这样会关闭浏览器的同源策略，有安全风险，测试完记得关掉这个窗口，换回正常模式。

额外提醒 #

检查你的Angular请求代码，如果请求里包含自定义头（比如Authorization、非默认的Content-Type），这些会触发浏览器发送预检请求，一定要确保后端服务器在Access-Control-Allow-Headers里包含这些头，否则还是会报错。

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