How to make a [GET] request with custom headers in Angular 10?

Asked

Viewed 423 times

0

I need to make a call to my Angular 10 microservice, passing some information in the Request Header. However, doing so returns the following error:

Error triggered in console while calling service

Access to Xmlhttprequest at 'URL' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field filtertype is not allowed by Access-Control-Allow-Headers in preflight.

Do I need to set up something in my microservice? I made the same call through Postman, and it works. But it doesn’t work with my angular application. Even though I deploy and test in PROD doesn’t work either. I have tried to mount the header in several ways, but they all end up in the same error. Follow the code: (Note that the request does not work when I pass the custom headers)

Attempt #1 ->> WORKS

let headers = new HttpHeaders()
        .append('Authorization', accessToken)
 
return this.http.get(`${API_URL}`, { headers }).pipe(map((data: any) => { 
   return data;
});

Attempt #2 ->> DOES NOT WORK

let headers = new HttpHeaders()
        .append('Authorization', accessToken)
        .append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8')
        .append('access-control-allow-origin', '*')
        .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS')
        .append('filterType', 'name')
        .append('size', size.toString());

return this.http.get(`${API_URL}`, { headers }).pipe(map((data: any) => { 
   return data;
});

Attempt #3 ->> DOES NOT WORK

 var config = {
    headers:  {
      'Authorization': accessToken,
      'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
      'filterType': "name",
      "size" : size.toString()
    }
  };

return this.http.get(`${API_URL}`, config).pipe(map((data: any) => { 
   return data;
});
angular http-request
  • 1

    When this happened to me, it was a mistake in the backend, had to be made a modification in the backend for the type of CORS access to be allowed.

  • 1

    You can remove both CORS headers access-control-allow-origin and Access-Control-Allow-Methods Because they’re response headers, not requisition headers. Where the server will respond with them so the browser knows whether or not to allow the request

  • I really needed to modify the server to accept these "custom" headers. So I chose to send the information in another way. Thank you all.

2 answers

1

Hello!

Often when CORS error happens it is triggered by backend. You would need to add Access-Cross-Origin in the backend.

If you are using nodejs with express, there is a simple package to free up access.

  1. Install the package: npm install cors
  2. Add right after instantiating the express:
    var express = require('express')
    var cors = require('cors')
    var app = express()
    app.use(cors())

To add more settings to Cors see package npm

0

Try this:

let headers = new HttpHeaders()
    .append('Authorization', accessToken)
    .append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8')
    .append('access-control-allow-origin', '*')
    .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS')
    .append('filterType', 'name')
    .append('size', size.toString());

return this.http.get(`${API_URL}`, { headers: headers }).pipe(map((data: any) => { 
   return data;
});

At the time of passing the Headers within the options prescrisa be passed as an object: {headers: Httpheaders}

  • Thanks for the tip buddy. But it didn’t work either :/

Browser other questions tagged angular http-request

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