Access to XMLHttpRequest at 'http://localhost:1111/…' from origin 'http://localhost:4200' has been blocked by CORS policy:

Question

Cross origin is not happening, blocked by CORS policy.

I am on a Windows system.

In -.service.ts file:

 makeHeaders() {
    const headers = new HttpHeaders({
      'content':"application/json",
      'Content-Type': 'application/x-www-form-urlencoded',
      // 'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Origin': 'http://localhost:4200',
      'Access-Control-Allow-Methods': 'OPTIONS, GET, POST',
      'Access-Control-Allow-Headers': 'Origin, Content-Type, Accept, Access-Control-Allow-Origin, Authorization, X-Requested-With'
      })
    return headers;
  }

in proxy.conf.json file:

"target": "http://localhost:1111"

I got this error in the browser console:

Access to XMLHttpRequest at 'http://localhost:1111/api/v1/employees/create' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. core.js:15724 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:1111/api/v1/employees/create", ok: false, …}

Thanks

cors issue can't fix from client side application. i can see you are using proxy but it is not set up properly. — Khurshid Ansari

HaSnen Tai HaSnen Tai · Accepted Answer · 2019-06-19T06:12:13

You can Try this

app.options("/*", function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.sendStatus(200);
});

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    next();
});

As you are working on localhost you need the plugin to be installed.

Chrome

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

FireFox

https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

Thanks

Access to XMLHttpRequest at 'http://localhost:1111/…' from origin 'http://localhost:4200' has been blocked by CORS policy:

1 Answers