在请求标头字段中启用 cors 在预检响应中 Access-Control-Allow-Headers 不允许 Access-Control-Allow-Origin答案

【问题标题】：cors enable in Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response在请求标头字段中启用 cors 在预检响应中 Access-Control-Allow-Headers 不允许 Access-Control-Allow-Origin
【发布时间】：2019-02-10 17:05:37
【问题描述】：

我在后端使用 spring boot 服务，前端使用 angular 6。

在 spring boot 中我启用了 cors 使用。

 @Override
 public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/interview/**").allowedOrigins("*");
 }

我正在为每个服务使用拦截器。

在前端调用服务中：

headers = new Headers();
constructor(private http: Http, private logger: MLogger) {
    this.headers.set("Access-Control-Allow-Origin", "*");
    this.headers.set( 'Content-Type', 'application/json',);
    this.headers.set( 'Accept', '*');
    this.headers.set( 'sessionId', DataService.sessionId);
 }
 private options = new RequestOptions({ headers: this.headers});
  interviewCommand: InterviewCommand;
  getInterviewDetails(data: any): Promise<any> {
    const serviceURL = environment.startInterviewURL;
    return this.http
      .post(serviceURL,data, this.options)
      .toPromise()
      .then(
        interviewCommand => {
          //doing some stuff
          }
        })
      .catch(this.handleInterviewCommandError);
  }

如果使用拦截器，我会遇到异常。如果不使用 interepter，我不会收到 cors 错误..

无法加载http://localhost:7070/example/myservice：请求标头字段 Access-Control-Allow-Origin 不允许预检响应中的 Access-Control-Allow-Headers。

在我的拦截器中，我添加了以下内容：

if (request.getMethod().equals("OPTIONS")) {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Origin-Methods", "GET, POST, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Range, Content-Disposition, Content-Description,Origin, X-Requested-With");
        response.setHeader("Access-Control-Expose-Headers", "*");
          response.setHeader("Access-Control-Allow-Credentials", "true");
          response.setHeader("Access-Control-Max-Age", "4800");
        }

【问题讨论】：

如果启用了全局 cors 配置，则不需要拦截器
从您的前端 JavaScript 代码中删除 this.headers.set("Access-Control-Allow-Origin", "*")。 Access-Control-Allow-Origin 不是请求标头。这是一个响应头
我正在将拦截器用于我的休息服务的其他目的。
得到了解决方案.......

标签： java spring angular spring-boot cors

【解决方案1】：

得到答案...

删除了 this.headers.set("Access-Control-Allow-Origin", "*") 你前端

和

在拦截器响应的后端添加..

response.setHeader("Access-Control-Allow-Headers", “授权，内容类型，内容范围，内容处置， Content-Description,Origin, X-Requested-With, sessionId"); response.setHeader("Access-Control-Allow-Origin", "*");

When you start playing around with custom request headers you will get a CORS preflight. This is a request that uses the HTTP OPTIONS verb and includes several headers, one of which being Access-Control-Request-Headers listing the headers the client wants to include in the request.

You need to reply to that CORS preflight with the appropriate CORS headers to make this work. One of which is indeed Access-Control-Allow-Headers. That header needs to contain the same values the Access-Control-Request-Headers header contained (or more).

https://fetch.spec.whatwg.org/#http-cors-protocol explains this setup in more detail.

solution is here

【讨论】：