Angular 5跨域报错：Request header field Access-Control-Allow-Origin不被允许

嘿，我来帮你搞定这个跨域报错！你现在踩了一个很常见的CORS坑——那些带Access-Control-*的头根本不是前端该发的请求头，它们是服务器返回给浏览器的响应头！你把这些头加到前端请求里后，浏览器在发送预检OPTIONS请求时，发现服务器的响应并没有允许这些头作为合法请求头，所以就抛出了这个错误。

下面分步骤帮你解决：

1. 先清理前端请求里的多余头 #

首先把你service.ts里httpOptions中的所有Access-Control-*相关头删掉，这些和前端请求完全无关，只保留前端实际需要的请求头就行。修改后的httpOptions应该是这样：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    // 如果需要携带token等信息，再加Authorization这类实际需要的请求头
  }),
  params: new HttpParams({})
};

另外注意你的get_doctor_list()方法没传httpOptions，如果需要统一请求头的话可以补上，但核心是绝对不要带任何Access-Control-*开头的头。

2. 关键：在服务器端配置CORS #

跨域问题本质是浏览器的安全限制，必须由服务器端配合解决，前端自己没法完全搞定。你需要在目标服务器（http://a.com）上配置正确的CORS响应头，具体配置方式取决于你的服务器语言/框架，这里给两个常见示例：

示例1：Node.js Express服务器 #

用cors中间件快速配置：

const cors = require('cors');
const express = require('express');
const app = express();

const corsOptions = {
  origin: 'http://localhost:4200', // 你的Angular开发地址
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
  credentials: true // 如果需要携带cookie等凭证就开启
};

app.use(cors(corsOptions));

示例2：Java Spring Boot服务器 #

通过配置类实现全局CORS：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:4200");
        config.addAllowedMethod("*"); // 允许所有请求方法，也可以指定具体的
        config.addAllowedHeader("*"); // 允许所有请求头，也可以指定具体的
        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/api/**", config); // 匹配你的接口路径
        return new CorsFilter(source);
    }
}

3. 开发环境临时替代方案（如果服务器暂时无法修改） #

如果服务器那边暂时没法调整配置，你可以用Angular的代理功能绕过跨域限制：

1. 在项目根目录创建proxy.conf.json文件，内容如下：

{
  "/api": {
    "target": "http://a.com",
    "secure": false,
    "changeOrigin": true
  }
}

2. 修改angular.json里的serve配置，添加代理文件路径：

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

3. 把service里的请求地址改成相对路径（去掉域名）：

// postData方法修改后
return this.http.post('/api/doctors/doctor', new_doctor, httpOptions);
// get_doctor_list修改后
return this.http.get('/api/doctors/doctor');

重启Angular开发服务后，请求会通过代理转发，浏览器就不会报跨域错误了。

总结一下 #

• 前端绝对不要在请求头里加Access-Control-*这类头，这些是服务器专属的响应头
• 跨域问题的根本解决必须靠服务器配置正确的CORS响应头
• 开发环境可以用Angular代理临时绕过限制

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