CORS error when requesting using Httpclient at Angular

Asked

Viewed 3,615 times

1

I am trying to perform an HTTP request using "Httpclient" from Angular 4, and I get the following error:

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

According to the researches I did and what I know of CORS would have to inform in the Header of the request the origin, my doubt is. What is the correct way to perform this request obeying the rules of CORS using Angular?

I tried the following code:

public get(url: string, params: HttpParams) {

    let options = {
        headers: new HttpHeaders()
            .set('Access-Control-Allow-Origin', 'http://localhost:4200'),
        params: params

    }

    return this.http.get<any>(url, options);
}

I’m using the following url "http://apiadvisor.climatempo.com.br/api/v1/forecast/locale/3477/hours/72?token=XXXXX", but when trying with other services the same error occurs.

I tried to replace 'http://localhost:4200' by '*' and was unsuccessful

angular http-headers cors httpclient

  • your server allows cross-origin requests?

  • The server I am trying to access allows yes, it is the Weather Forecast api of Weather, but I am making the call at the beginning of a local server, I just lifted a local server with "ng serve", I need to make some local configuration tbm?

  • from what I understand by looking at the documentation of this api you should generate a token and enable Cors there. In your angular application you should then attach this token generated

  • First thank you for your commitment to help and I have already done so, "http://apiadvisor.climatempo.com.br/api/v1/forecast/locale/3477/hours/72?token=XXXXXX", I just switched the token to XXXXX, the problem is that I tried to consult other services and had the same error, so I’m thinking I set up the requisition headers wrong

  • You mean the 72-hour forecast per city ID worked but no other requisition worked? Can you tell me what other requests you tried?

  • Because in my view all the requests available in this api are get requests, where the parameters are passed by the url. That way, you just need to concatenate &token=your-app-token in each of the http.get for this api

  • No request worked, neither in this weather service, nor in another service, as the Open Weather API, seems to be something very simple even, I concatenei the token and did a get, but appears Cors error, even if I set in the request header, Do you know if there is another way to set up the header? Otherwise: ". set('Access-Control-Allow-Origin', 'http://localhost:4200')"

  • Let’s go continue this discussion in chat.

Show 3 more comments

1 answer

4


Considering the documentation of API of Weather Weather, after the token have been generated, just you concatenate it at the end of the URL used for each HTTP request:

public get(url: string, params: HttpParams) {    
    return this.http.get<any>(url + "token=" + this.token, options);
}

Browser other questions tagged angular http-headers cors httpclient

You are not signed in. Login or sign up in order to post.