Angular 4 : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Error: Access to XMLHttpRequest at 'myserviceURL' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Sample Code:

  let myHeaders = new HttpHeaders();
  let username: string = 'admin';
  let password: string = 'admin';
  myHeaders.append("Authorization", "Basic " + btoa(username + ":" + password));
  myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

  var data={
        "username":userName,
        "password":Password,
  }

  return this.http.post(url, data, { headers: myHeaders })
  .subscribe(
  res =>{
    console.log(res);
  },
  err => {
    console.log("Error occured "+err.status);
  }
  );

How's the backend code? When you do a request, have you added http:// at the start? — Jacopo Sciampi
– Jacopo Sciampi, Commented Feb 27, 2019 at 12:55
To you have access to the server? CORS is a server side setting so it won't be a client side problem. — A_kat
– A_kat, Commented Feb 27, 2019 at 12:56

Vinko Vorih · Accepted Answer · 2019-02-27 13:50:43Z

If your back-end is running on different port, Chrome, by default, will prevent Cross origin resource sharing. When you are developing app, you have to create proxy that will be ran within ng serve or npm start and he will recreate/forward all your api calls to specified address. Here's example:

//proxy.json

   {
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

What does this mean? Any http request that is pointed towards /api will be rewritten to http://localhost:8080.

Also, you have to either change npm start property inside of package.json or change ng serve inside of angular.json so that proxy will be ran by default with command ng serve/npm start

//angular.json

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "yourapp:build",
        "proxyConfig": "proxy.json"
      },
      "configurations": {
        "production": {
          "browserTarget": "yourapp:build:production"
        }
      }
    }

Jeena · Accepted Answer · 2019-02-27 13:40:58Z

0

As it is a server-side issue, What you can do is: If you are using chrome, you can add chrome extension for CORS which will allow access to 'Access-Control-Allow-Origin'

it will work.

worked for me!!!

answered Feb 27, 2019 at 13:40

Jeena

1

Comments

aditya agnihotri · Accepted Answer · 2019-02-27 14:05:07Z

0

when you are using 'application/x-www-form-urlencoded' Please send the encoded data(Object) in this format.

    const data =
      'username=' +
      encodeURIComponent(userName) +
      '&password=' +
      Password +
      '&grant_type=password';

answered Feb 27, 2019 at 14:05

aditya agnihotri

363 bronze badges

Collectives™ on Stack Overflow

Angular 4 : No 'Access-Control-Allow-Origin' header is present on the requested resource

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related