Angular 2 localhost and Backendserver Connection

Question

I am trying to run a Angular 2 project with npm start on my machine and access the backend on another server. When I call a post or get I always getting the 'Access-Control-Allow-Origin missing' error in the Firefox console. When I deploy my app on the server it works perfectly fine, but I dont want to wait all the time to deploy my app.

I tried different solutions, like proxies. Do I need to configure my localhost or something else? Is there a state of the art solution?

Answer 1

You can set up proxy in your local environment.

In your package.json add in the script "serve-dev": "<startApplication> --sourcemap=false --proxy-config proxy.config.json".

And run it using npm run serve-dev.

And proxy.config.json file should look like this:

{
  "/api/*":{
    "target":"http://localhost:5005",
    "secure": false,
    "logLevel": "debug"
  }
}

And when you call endpoint in your service just get should be like: this._http.get('./api/myEndpoint').

Answer 2

Set this up before you API route and after your app use

app.use(express.static(publicPath)); // Set the path for express to use

// Add headers
app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
  next();
});