No 'Access-Control-Allow-Origin' header in Angular 2 app
This a problem with the CORS configuration on the server. It is not clear what server are you using, but if you are using Node+express you can solve it with the following code
// Add headers
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
that code was an answer of @jvandemo to a very similar question.
You can read more about that from here: http://www.html5rocks.com/en/tutorials/cors/.
Your resource methods won't get hit, so their headers will never get set. The reason is that there is what's called a preflight request before the actual request, which is an OPTIONS request. So the error comes from the fact that the preflight request doesn't produce the necessary headers. check that you will need to add following in your .htaccess file:
Header set Access-Control-Allow-Origin "*"
I have spent lot of time for solution and got it worked finally by making changes in the server side.Check the website https://docs.microsoft.com/en-us/aspnet/core/security/cors
It worked for me when I enabled corse in the server side.We were using Asp.Net core in API and the below code worked
1) Added Addcors in ConfigureServices of Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
services.AddMvc();
}
2) Added UseCors in Configure method as below:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors(builder =>builder.AllowAnyOrigin());
app.UseMvc();
}