Angular 4 Post请求跨域问题：预检请求未通过访问控制检查

首先得给你指出来：你在前端代码里添加Access-Control-Allow-Origin这类CORS头是完全没用的！这类响应头必须由后端服务器返回，浏览器才会认可，前端设置的这些头会被浏览器直接忽略，这就是你遇到错误的核心原因。

下面分两种常见场景给你具体的解决办法：

场景1：你能控制后端服务（自己开发的后端） #

不管你的后端用什么语言或框架，核心都是要让后端在响应（包括浏览器自动发起的OPTIONS预检请求）中返回Access-Control-Allow-Origin等必要的CORS头。这里给几个常用框架的示例：

• Node.js/Express：用cors中间件最简单

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 开发环境可以允许所有来源，生产环境一定要换成你的前端域名
  app.use(cors());
  
  // 生产环境示例：只允许指定域名访问
  // app.use(cors({ origin: 'https://your-frontend-site.com' }));
  

• Java/Spring Boot：用注解快速配置

  import org.springframework.web.bind.annotation.CrossOrigin;
  import org.springframework.web.bind.annotation.RestController;
  
  @RestController
  @CrossOrigin(origins = "*") // 同样，生产环境替换为具体域名
  public class YourApiController {
      // 你的接口方法...
  }
  

• PHP：直接在接口开头加响应头

  // 允许所有来源，生产环境替换为具体域名
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Headers: Content-Type");
  

配置完成后，后端会自动处理浏览器的预检请求，并返回合法的CORS头，浏览器就不会再报错了。

场景2：你无法控制后端（调用第三方API） #

这种情况下，前端直接请求会被浏览器拦截，你可以通过代理转发来绕过CORS限制。以你用的Angular为例：

1. 在项目根目录创建proxy.conf.json文件：

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

2. 修改angular.json里的开发服务器配置，指定代理文件：

   "architect": {
     "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
         "proxyConfig": "proxy.conf.json"
       }
     }
   }
   

3. 前端请求时，把目标URL换成代理路径：

   // 原本的请求：this.http.get('https://third-party-api-domain.com/your-endpoint')
   // 改为：
   this.http.get('/api-proxy/your-endpoint')
   

这样Angular的开发服务器会帮你转发请求，避免浏览器的CORS拦截。生产环境可以用Nginx等反向代理工具做同样的配置。

最后提醒 #

• 生产环境绝对不要用*作为允许的来源，一定要指定具体的前端域名，避免安全风险。
• 预检请求（OPTIONS）是浏览器自动发起的，你不需要在前端手动处理，只要后端能正确响应它就行。

内容的提问来源于stack exchange，提问作者Fatema tuz johura