Failed to load http://127.0.0.1:8000/api/users: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

when i want to add a form with API Symfony and angular js (Frontend) i had this error can someone know why ?

Failed to load http://127.0.0.1:8000/api/users: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. AddUserComponent.html:16 ERROR Error: Error trying to diff 'server error'. Only arrays and iterables are allowed at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.diff (core.es5.js:6843) at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngDoCheck (common.es5.js:1691) at checkAndUpdateDirectiveInline (core.es5.js:10846) at checkAndUpdateNodeInline (core.es5.js:12341) at checkAndUpdateNode (core.es5.js:12284) at debugCheckAndUpdateNode (core.es5.js:13141) at debugCheckDirectivesFn (core.es5.js:13082) at Object.eval [as updateDirectives] (AddUserComponent.html:21) at Object.debugUpdateDirectives [as updateDirec

Userservice

 @Injectable()
    export class UserService {
      private uri= 'http://127.0.0.1:8000/api/users';
      constructor(private http: Http, private authenticationService: AuthService  
     ) {}
      addUser(user: User) {
            const  headers = new Headers();
            headers.append('content-type', 'application/json');
            headers.append('Authorization', 'Bearer ' + this.authenticationService.token);
            return this.http.post(this.uri, JSON.stringify(user), {headers : headers})
            .map(res => res.json()).catch(this.handelError);
          }

Research "CORS", and gain some understanding. It's very important to control cross site scripting attacks. — erik258, Dec 29 '17 at 15:27

santosh singh · Accepted Answer · 2017-12-29T16:56:27.443

1

This is CORS issue. CORS is security implemented in browser.If you are using angular you can resolved this issue by creating a proxy.conf.json file to act as a proxy server.

{
  "/api*": {
    "target": "http://127.0.0.1:8000",

  },
    "changeOrigin": true
  }
}

And then modify the npm start command in package.json as below

"start": "ng serve --proxy-config proxy.conf.json"

You can read more about this on this link

edited Dec 29 '17 at 16:56

answered Dec 29 '17 at 15:36

santosh singh

27,666
26
83
129

i edited "target": "http://127.0.0.1:8000" or localhost:4200 because i worked with symfony localhost:8000 and with angularjs localhost:4200 ? @santosh singh – helen Dec 29 '17 at 16:08
target will be your api 127.0.0.1:8000/api – santosh singh Dec 29 '17 at 16:10
i run with ng server or npm start ? @santosh singh – helen Dec 29 '17 at 16:15
@helen npm start – santosh singh Dec 29 '17 at 16:54
@helen : strange! – santosh singh Dec 29 '17 at 16:57
@helen : You configured the proxy as per my answer – santosh singh Dec 29 '17 at 16:58
@helen : checkout this link https://stackoverflow.com/questions/45898253/httpclient-angular4-no-access-control-allow-origin-header-is-present-on-th?rq=1 – santosh singh Dec 29 '17 at 17:01
when i used npm start i have this error "Port 4200 is already in use. Use '--port' to specify a different port." npm ERR! youtube-news@0.0.0 start: `ng serve --proxy-config proxy.conf.json` – helen Dec 29 '17 at 17:03
It's looks like you are running two instances of ng server.close all the running instances – santosh singh Dec 29 '17 at 17:05
Just installed this chrome extensions and disabled the cors https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en – santosh singh Dec 29 '17 at 17:10
it solved @santosh but now i have this error did know why ""AddUserComponent.html:16 ERROR Error: Error trying to diff 'TypeError'. Only arrays and iterables are allowed atDefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.diff (vendor.bundle.js:54225) atNgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngDoCheck (vendor.bundle.js:16964) at checkAndUpdateDirectiveInline (vendor.bundle.js:58228) at checkAndUpdateNodeInline (vendor)"" – helen Dec 29 '17 at 17:34
The reason of this error is that your iterating over the variable which is not iteratable.That's the reason ngFor is failing – santosh singh Dec 29 '17 at 17:37
i think the ngFor of errors in form add user

There is an error in :{{error.field}} field

{{error.message}}

– helen Dec 29 '17 at 17:49
@helen : I think so – santosh singh Dec 29 '17 at 17:49

score 0 · Answer 2 · answered Dec 29 '17 at 15:28

This is CORS issue. CORS is security implemented in browser.

It means that you are not allowed to make HTTP request to other domain or port than yours.

In your case your application is running on localhost:4200 but you are requesting from localhost:8000. Therefore this is blocked by browser.

For developing purposes you can use angular-cli proxy which allows you to make a tunnel on 4200 port.

For production use you should either whitelist your server in CORS security headers or make your API available on the same host (like mapping /api to your backend).

Failed to load http://127.0.0.1:8000/api/users: No 'Access-Control-Allow-Origin' header is present on the requested resource

2 Answers2