飞行前响应中的Access-Control-Allow-Headers不允许请求标头字段时区

Question

I have a WEB API which I am consuming from POSTMAN, and it works perfectly fine:

Headers:

Content-Type:application/json X-Developer-Id:asdasdas X-Api-Key:asdasdas Authorization:Bearer sasdasdsa Time-Zone:Morocco Standard Time

When I do a GET request in POSTMAN it works fine, however from angular 2 (Ionic 2) I get the following error:

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


let params: URLSearchParams = new URLSearchParams();
        params.set('date', date);

        //Header
        let headers = new Headers({
            'Content-Type': AppSettings.ContentType,
            'X-Developer-Id': AppSettings.XDeveloperId,
            'X-Api-Key': AppSettings.XApiKey,
            'Time-Zone': AppSettings.time_zone,
            'Authorization': AppSettings.Authorization + localStorage.getItem("AccessToken")
        });

        var RequestOptions: RequestOptionsArgs = {
            url: AppSettings.UrlAvailability + userId,
            method: 'GET',
            search: params,            
            headers: headers,
            body: null
        };

        return this.http.get((AppSettings.UrlAvailability + userId), RequestOptions)
            .map(res => res.json())
            .do(data => { data },
            err => console.log('error: ' + err));

First I would think that the API developers have to do something on the server side, like enabling that Time-Zone Header on CORS, however if that would be the case then we would get the same error on POSTMAN, but it works fine there.

What am I missing here?

Answer 1

This is something you need to configure on the server. You first need to make sure you have CORS support. I don't use ASP.NET, so I don't know how to do it. I'm pretty sure a quick google search will find you the answer. Then you need to make sure in that server CORS config, that special headers you want the client to be able to send are added to the CORS allowed headers. That's what the error is saying: that the headers are not included in the response header Access-Control-Allow-Headers . The response header would look like

Access-Control-Allow-Headers: X-Developer-Id, X-Api-Key, Time-Zone, Authorization

To learn more about CORS, see the MDN

First I would think that the API developers have to do something on the server side, like enabling that Time-Zone Header on CORS, however if that would be the case then we would get the same error on POSTMAN, but it works fine there

No, Postman does not have the same restrictions. It is a native desktop app. Fun fact: 99% of people who post questions on SO that hava a CORS problem, have somewhere in their post "...but it work with Postman!". So don't feel bad :-)