How to send rest requests using Angular2?

Question

RESTful API

Good afternoon, I have an application that is on a local server at localhost:3000.
There is a server, also on the localhost with the address localhost:6060/api , I'm trying to send both post and get requests using angular like this:

let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append("Access-Control-Allow-Origin", "*");
    headers.append("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
    headers.append("Access-Control-Allow-Headers", "X-Requested-With,content-type");

    this.http.get('http://localhost:6060/api/v1/userinfo', {
      headers: headers
    })
      .subscribe(
      data => {
        alert(data.json());
      },
      err => this.alertSome(err.json().message),
      () => console.log('Authentication Complete')
      );

on the server I accept this:

func GetUserInfo(w http.ResponseWriter, r *http.Request) {
  w.Header().Set("Content-Type", "application/json; charset=UTF-8")
  w.Header().Set("Access-Control-Allow-Origin", "*")
  w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE")
  w.Header().Set("Access-Control-Allow-Headers", "X-Requested-With,content-type")

That is, I put down all the headers, but in the browser I see an error when sending:

[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (playlist.json, line 0)
[Error] XMLHttpRequest cannot load http://localhost:6060/api/v1/auth. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

What have I done wrong? What did I miss? I thought it was in the server, but I tried to send to public servers with api and I get the same error, it turns out that it's in angular2 but I can't figure out what exactly I did wrong. Thank you.

Answer 1

The point is most likely not in angular, but in the headers that you configure, or in the server settings.
Why do you have it on the client?

headers.append("Access-Control-Allow-Origin", "*");
headers.append("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
headers.append("Access-Control-Allow-Headers", "X-Requested-With,content-type");

The client automatically adds the Origin header . Access should give the server.
And such a title

headers.append('Content-Type', 'application/json');

in GET requests it seems not needed
Why are you sending such a request
And the answer has a completely different url
If the OPTIONS request comes first, then you need to make sure that the server allows such requests. The other day I was building an Angular2 + server project on openserver and I ran into just such a problem, Openserver by default prohibits OPTIONS requests, after turning it on everything worked.
Experiment, give on the server.

w.Header().Set("Access-Control-Allow-Methods", "*")
w.Header().Set("Access-Control-Allow-Headers", "*")

Remove unnecessary headers on the client. Better yet, install Postman and experiment there.
And of course in chrome in the Network tab it is very easy to check all the headers

Answer 2

CORS policy headers must be sent by the server.
Those. you have headers
headers.append("Access-Control-Allow-Origin", "*");
headers.append("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
headers.append("Access-Control-Allow-Headers", "X-Requested-With,content-type");
should be returned by the server when responding to a request
As a crutch for local development, if CORS is not needed on production, you can run Chrome with the security policy turned off