Solvedangular what's wrong with the http headers in angular 2 using typescript

I found several documents telling me to set the headers by the code below.

    var tokenHeader = new Headers();
    tokenHeader.append('token', 'somevalue');
    var options = new RequestOptions({
      method: RequestMethod.Get,
      url: 'http://localhost:8080/v1/users',
      headers: tokenHeader
    });
    var req = new Request(options);
    this.http.request(req)
    .subscribe((res: Response) => {
        <do something>
    });

when I look at the console when sending this request, the request headers look like:

Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,ja;q=0.6,zh-CN;q=0.4,zh;q=0.2
Access-Control-Request-Headers:token
Access-Control-Request-Method:GET
...

I can find "token" in Access-Control-Request-Headers, but, where is my "somevalue"?,
by using "curl" command, the request headers look like the code below and it works well.

Host: localhost:8080
> User-Agent: curl/7.43.0
> Accept: */*
> Referer: rbose
> token: <somevalue>
> Cache-Control: no-cache

Also having this header problem, I receive the error message all the time even though I set the "w.Header().Set("Access-Control-Allow-Origin", "*")" in my server side.(no error occurs if I don't add headers in the request)

XMLHttpRequest cannot load http://localhost:8080/v1/users. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 404.

CORS doesn't come into play when using curl - it is only browser's mechanism. At this is a mechanism on a browser level, not a framework level. More info: http://www.html5rocks.com/en/tutorials/cors/

Please use @crossorigin on the backend side in Java Spring boot controller (either class level or method level) as the solution for Chrome error'No 'Access-Control-Allow-Origin' header is present on the requested resource.'

This solution is working for me 100% ...

Example : Class level

@crossorigin
@controller
public class UploadController {

----- OR -------

Example : Method level

@crossorigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
@responsebody
public List loadAllCars() {

Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

I had the same issue,
client side --> angular 5
server side --> Nodejs v9.8.0

I have added cors to the server app
npm install cors --save

then imported:
const cors = require('cors');

Then enabled the middleware :
app.use(cors());

Thats it, now it is working fine with no issue.

In my experience the plugins worked with http but not with the latest httpClient. Also, configuring the CORS respsonse headers on the server wasn't really an option. So, I created a proxy.conf.json file to act as a proxy server.

Read more about this here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

below is my proxy.conf.json file

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

I placed the proxy.conf.json file right next the the package.json file in the same directory

then I modified the start command in the package.json file like below

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

now, the http call from my app component is as follows

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Lastly to run my app, I'd have to use npm start or ng serve --proxy-config proxy.conf.json

is adding @crossorigin works