Angular 5调用POST接口出现CORS跨域错误求助

嘿，这个问题我太熟了！你碰到的是浏览器同源策略导致的CORS跨域错误——浏览器默认不允许前端从一个域名（这里是http://localhost:4200）直接请求另一个域名/端口的后端接口，除非后端明确允许你的前端来源访问。下面给你几个实用的解决办法，按优先级排序：

1. 后端配置CORS（推荐生产+开发环境使用） #

这是最根本的解决方案，因为CORS的权限控制本来就该由后端来处理。根据你后端的技术栈，对应配置就行：

比如后端是Node.js/Express： #

安装cors中间件后，在服务启动代码里添加：

const cors = require('cors');
// 允许你的前端来源访问
app.use(cors({ origin: 'http://localhost:4200' }));
// 如果要允许所有来源（不推荐生产），可以写app.use(cors())

比如后端是Java Spring Boot： #

在对应的控制器类或方法上添加注解：

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class YourController {
  // ...接口代码
}

或者配置全局CORS规则，让所有接口都允许指定来源访问。

注意：如果你的POST请求带了自定义请求头（比如token），后端还要确保允许这些头，并且正确处理OPTIONS预检请求（大部分后端框架会自动处理，但如果是自定义的路由，可能需要手动配置）。

2. Angular代理配置（开发环境临时用） #

如果后端暂时没法改配置，或者你只想在开发阶段快速绕过CORS，可以用Angular自带的代理功能，把前端请求转发到后端：

• 第一步：在Angular项目根目录创建proxy.conf.json文件，内容如下（替换成你的后端地址）：

{
  "/api": {
    "target": "http://你的后端地址:端口",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": { "^/api": "" } // 如果后端接口没有/api前缀，就加这个把前缀去掉
  }
}

• 第二步：修改angular.json里的serve配置，添加proxyConfig：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名:build",
    "proxyConfig": "proxy.conf.json"
  }
}

• 第三步：重启Angular开发服务器（ng serve），之后前端请求就用/api/xxx代替完整的后端URL，代理会帮你转发请求，这样浏览器就认为是同源请求了。

3. 浏览器禁用CORS（仅用于本地测试，绝对禁止生产使用） #

这个方法只是临时测试用，不能给用户用：
比如Chrome浏览器，可以关闭所有Chrome窗口后，用命令行启动：

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

# Mac
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"

这样浏览器会关闭同源策略检查，但仅限测试，生产环境绝对不能依赖这个。

另外补充一句：你的Angular服务代码本身是没问题的，这个错误和你写的HttpClient调用逻辑无关，完全是跨域限制导致的~

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