Angular 12调用Pole-emploi API被CORS拦截 无Access-Control-Allow-Origin头报错求助

核心问题说明 #

• Access-Control-Allow-Origin是响应头字段，只能由接口服务端返回时携带，前端在请求头中添加该字段完全无效，反而会因为新增了自定义请求头触发浏览器的OPTIONS预检请求，而目标接口未配置预检请求的CORS规则，直接拦截了你的请求。
• 浏览器的同源策略默认禁止跨域调用未配置CORS的第三方接口，你用REST Client插件请求成功是因为插件是在本地直接发起HTTP请求，不走浏览器的同源策略校验逻辑，所以不会触发CORS报错。
• 额外提醒：你当前用的OAuth2 client_credentials授权模式本身是为服务端调用设计的，密钥client_secret直接写在前端代码中会被所有用户抓包获取，存在严重的安全泄露风险，本身就不建议前端直接发起这类请求。

解决方案 #

方案1：本地开发用Angular代理转发（仅开发环境生效） #

Angular官方自带代理功能，本地开发时可以把接口请求转发到目标服务，绕开浏览器CORS限制，配置步骤：

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

{
  "/pole-emploi": {
    "target": "https://entreprise.pole-emploi.fr",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/pole-emploi": ""
    }
  },
  "/emploi-api": {
    "target": "https://api.emploi-store.fr",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/emploi-api": ""
    }
  }
}

2. 修改package.json里的启动命令，把ng serve改成ng serve --proxy-config proxy.conf.json
3. 修改company.service.ts代码，删掉请求头里无用的Access-Control-Allow-Origin字段，同时把请求域名替换为代理前缀：

import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class CompanyService {
  constructor(private http: HttpClient) {}
  
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded',
    }),
  };

  getToken(): Observable<any> {
    return this.http.post(
      '/pole-emploi/connexion/oauth2/access_token?realm=%2Fpartenaire',
      'grant_type=client_credentials&client_id=*************&client_secret=*************&scope=*************%20api_labonneboitev1',
      this.httpOptions
    );
  }
}

后续调用业务接口时，把原域名https://api.emploi-store.fr替换成/emploi-api即可。

方案2：生产环境用后端服务转发请求 #

生产环境部署后Angular代理就不再生效，正确的生产级处理逻辑是：
自己开发一套后端接口作为中转层，前端只请求你自己的后端接口，再由后端服务去请求Pole Emploi的接口获取token和业务数据，最终返回给前端。
这种方式既可以彻底解决CORS问题，也可以避免client_secret直接泄露到前端的安全风险。

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