Corrs issue in Angular HTTP get

angular 8 cors issue
no 'access-control-allow-origin' header angular 7
access to xmlhttprequest at from origin has been blocked by cors policy angular 6
angular cross-origin request blocked
angular 9 cross origin request
angular cross domain request
invalid cors request angular
angular proxy

I am trying call an api as below:

let headers = new Headers();
headers.append('Authorization', `bearer `+this.getTokenFromStorage());
headers.append('Content-Type', 'application/json; charset=utf-8');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET');
let options = new RequestOptions({ headers: headers });
return this.http.get(Appconfig.HISURL + 'api/User/GetUserDetails/' + soeid, options);

Error shown below

err = HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "http://localhost:54721/api/User/GetUserDetails/MA12345", ok: false, …}

But i take the values and pass it on POSTMAN, it hit the API without any issues, what i am missing?

The problem is that you are using the new HttpClient (deduced from the fact that you get a HttpErrorResponse), but you pass in the wrong header instance: you are using Headers (angular 2-4) instead of HttpHeaders (angular 4-6)

Try that

import {HttpHeaders} from '@angular/common.http;

//...

let headers = new HttpHeaders().set('Authorization', `bearer `+this.getTokenFromStorage());

return this.http.get(Appconfig.HISURL + 'api/User/GetUserDetails/' + soeid, {headers});

Also passing the Access-Control-... headers client side is useless, since they are meant to be set server side

Making Proxy Request In Angular/Fix CORS Issue In Angular , ) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. Angular CLI provides a development server that runs on localhost:4200 by default so if you are using a back-end server that runs on a different domain, you may have CORS issues if your server is not configured properly. Even if your backend is running on localhost, it will be listenning on a different port, which is treated as a different domain.

Have you tried to look at proxy conf ?

Create a file proxy.conf.json with something like that :

 {
  "/api": {
    "target": "http://localhost:54721",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }

Then you just have to do your API call without any CORS headers.

Don't forget to add --proxy-config proxy.conf.json to your start script.

Handle CORS in Angular 8/9 with Proxy Configuration, How do you fix the CORS issue in angular 8? Angular runs on its own server (by default localhost:4200) and webAPI runs on a different port so we get the Cors issue. So, from the above screen, it is clear that WebAPI is running on port 57263 and our application is running on 4599 (it's not running in 4200 as I have changed the port in package.json).

Try this,

let url = 'API_URL';
let options = new RequestOptions({ headers: this.getHeadersWithAuthToken() });
return this.http.get(url,options).map(response => response.json());

getHeadersWithAuthToken(): Headers {
    return new Headers(
      {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Methods': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Origin': '*',
        'Authorization': `bearer `+localStorage.getItem("token")
      });
  }

Fixing CORS Issues in Your Front-End Angular 7/8 App with Angular , CORS headers are simply HTTP headers that tell a browser to allow a web application has a Control-Allow-Origin header with a * value or the domain of your client. Why Do CORS Issues Occur in Angular Development? Fixing CORS Issue in Angular 8/9. Angular server by default serves on localhost:4200 (PORT 4200) and suppose if your backend server is working on different port or domain, then the CORS issue will inevitably occur. Enable CORS with Proxy Configuration Settings in Angular. Now, we are setting proxy in backend.

Handling CORS issues in Ionic, Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at  The problem is that you are using the new HttpClient (deduced from the fact that you get a HttpErrorResponse), but you pass in the wrong header instance: you are using Headers (angular 2-4) instead of HttpHeaders (angular 4-6) Try that. import {HttpHeaders} from '@angular/common.http; //

ASP.NET Core and CORS Gotchas, Say we send an AJAX request to http://cors.api.com/api , your host We will also set up an Angular Service to use that API Endpoint to get data  Now this is it for this tutorial where we resolve the CORS issue while integrating Angular with MongoDb using Node.js Server. Source code for this tutorial is available on GitHub . Hope you guys like the tutorial, feel free to drop any comments in the comment section below.

Cross-origin resource sharing, NET Core application you'll need to use CORS to get XHR to talk across the to Angular 2.0 and in the process ran into CORS problems. true Access-Control-​Allow-Origin: http://localhost:3000 Content-Length: 2851. Getting a 'Cross-Origin Request Blocked' error? This video shows you how to quickly prevent these errors from occurring when sending web requests in Angular. The errors are typically formatted

Comments
  • why don't you use interceptors for adding the headers? If you are using httpClient.
  • what change i need to do for using interceptors
  • medium.com/@ryanchenkie_40935/… check this one.
  • is there any alternative without this?
  • thanks for the tips ..i got solution!
  • Thanks a ton! Its worked like a charm! You are STAR!!
  • where should i add this? in the above script?
  • In a file call proxy.conf.json
  • hope fully this is a work around not a solution, since we use proxy..am i right?
  • This is working only in a development environment. In a production environment the back-end should be on the same url and port than your Angular app. If you want to make some API call to an external API you should add CORS authorization in this API, not in your Angular app. But allow cross-domain requests isn't recommended for security reason.
  • If you are using "HttpClient" for accesing the http methods then it will give same error. Try to use "private http: Http" and access http methods with this.