“预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin" [英] “Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response”

问题描述

service.ts :

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

const httpOptions = {
    // headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'http://localhost:8080', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers':'X-Requested-With' }),
    headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'http://localhost:4200', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Credentials':'true','Access-Control-Allow-Headers':'X-PINGOTHER,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization','Access-Control-Expose-Headers':'xsrf-token' }),
    params: new HttpParams({})
};


@Injectable()
export class DemoService {

    constructor(public http: HttpClient) { }

    postData(doctor) {
        let new_doctor = JSON.stringify(doctor);
        return this.http.post('http://a.com/api/doctors/doctor', new_doctor, httpOptions);
    }

    get_doctor_list() {
        return this.http.get('http://a.com/api/doctors/doctor');
    }

    update_doctor_details(data,id) {
        let details = JSON.stringify(data);
        return this.http.put('http://a.com/api/doctors/doctor/id/' + id, details, httpOptions);
    }
}


component

    onSubmit(createdoctor:NgForm) {
        this.doctor_details = createdoctor.value;
        this.notvalid = createdoctor.valid == true?false:true;
        let date = new Date();
        let created_date = this.datePipe.transform(date, 'yyyy-MM-dd');
        this.doctor_details.Id = this.maxid;
        this.doctor_details.create_date = created_date;
        this.doctor_details.status = "1";
        this._demoService.postData(this.doctor_details).subscribe(
            error => {
                console.error("Error saving data!");
            }
        );
    }

但是我得到了error :

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin.

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

我是 angular 5 的初学者.我该如何解决这个问题?

I am a beginner in angular 5. How can I fix this issue?

推荐答案

CORS headers，那些以Access-Control-开头的都是响应 headers，必须设置通过并从服务器发送到浏览器，而不是相反，这就是您出错的原因

CORS headers, those that start with Access-Control- are response headers, they must be set by and sent from the server to the browser, not the other way around, that's the reason for your error

这篇关于“预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！