No 'Access-Control-Allow-Origin' header in Angular 2 app

Question

For this project, I'm just learning and practicing Angular 2. I have no server-side and am making API requests to barchart ondemand api .

I'm wondering if it is possible to bypass the cors issue. I'm still fairly new to all this, so baby-step instructions are really appreciated! I'm using http://localhost:8080.

Error message: (api key commented out)

XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&symbol=GOOG&type=daily&startDate=20150311000000. 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:8080' is therefore not allowed access.

StockInformationService:

import {Injectable} from 'angular2/core'; import {Http, Headers} from 'angular2/http'; import {Observable} from 'rxjs/Rx'; @Injectable() export class StockInformationService { private apiRoot = "http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&"; constructor (private _http: Http) {} getData(symbol: string): Observable<any> { // Tried adding headers with no luck const headers = new Headers(); headers.append('Access-Control-Allow-Headers', 'Content-Type'); headers.append('Access-Control-Allow-Methods', 'GET'); headers.append('Access-Control-Allow-Origin', '*'); return this._http.get(this.apiRoot + "symbol=" + symbol + "&type=daily&startDate=20150311000000", {headers: headers}) .map(response => response.json()); } }

App Component:

import {Component} from "angular2/core"; import {VolumeComponent} from '../../components/volume/volume'; import {StockInformationService} from '../../core/stock-information.service'; @Component({ selector: 'app-shell', template: require('./app-shell.html'), directives: [VolumeComponent], providers: [StockInformationService] }) export class AppShell { constructor(private _stockInformationService: StockInformationService) {} // In my template, on button click, make api request requestData(symbol: string) { this._stockInformationService.getData(symbol) .subscribe( data => { console.log(data) }, error => console.log("Error: " + error) )} } }

In my console, the requestData Error: Error: [object Object]

Could you add what server are you using? this in not angular2 error, but a problem with the CORS configuration of the server, if you said what server are you using, (apache, node+express, etc) you could get a more specific response. I can solve this error with a server with node+express — Pablo Ezequiel Inchausti
– Pablo Ezequiel Inchausti, Commented Mar 3, 2017 at 2:25
This answer maybe useful: stackoverflow.com/a/58064366/7059557 — AmirReza-Farahlagha
– AmirReza-Farahlagha, Commented Sep 23, 2019 at 14:12
It may sound weird but I didn't have to change anything on server side. There were two branch of angular ui project, on one it was working on another it wasn't. I'm yet to find the conclusive answer. — Bal Krishna Jha
– Bal Krishna Jha, Commented Mar 27, 2020 at 17:06

Community · Accepted Answer · 2017-05-23 12:18:20Z

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.

Hi @LahiruGamage, @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") worked for me on the request mapping method.
Basically this helped me: res.header("Access-Control-Allow-Origin", "<Website-URL>");

Nitheesh K P · Accepted Answer · 2016-03-15 04:27:55Z

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 "*"

Isn't this solution pretty bad through the fact you allow all the domains to controll your backend. What if someone connects to your server and runs a localhost on it? He would be able to get all data out of your backend. Or am I wrong and this is a safe and best practice way to solve this issue?

Prakash Pazhanisamy · Accepted Answer · 2017-11-02 06:24:27Z

Simply you can set in php file as

header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8");

klutt · Accepted Answer · 2017-12-14 20:13:41Z

I have spent lot of time for solution and got it worked finally by making changes in the server side.Check the website https://learn.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(); }

I refer this answer for my asp.net web API to solve no-access-control-allow-origin issue.

Shabbir Dhangot · Accepted Answer · 2016-12-21 14:10:28Z

I also had the same issue while using http://www.mocky.io/ what i did is to add in mock.io response header: Access-Control-Allow-Origin *

To add it there just need to click on advanced options

Mock.io Header Example Once this is done, my application was able to retrieve the data from external domain.

Vojtech Ruzicka · Accepted Answer · 2016-06-20 08:48:24Z

I also encountered the same problem and passed the following way to solve this problem.

step 1:

$ npm install --save-dev http-proxy-middleware

step 2:

add a proxy when i fetch web api, if you use lite-server you can add a file bs-config.js .

//file: bs-config.js var proxyMiddleware = require('http-proxy-middleware'); module.exports = { server: { middleware: { 1: proxyMiddleware('/example-api', { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/news-at-api': '/api' } }) } } };

hope this helps.

drewwyatt · Accepted Answer · 2016-03-15 04:08:19Z

3

Unfortunately, that's not an Angular2 error, that's an error your browser is running into (i.e. outside of your app).

That CORS header will have to be added to that endpoint on the server before you can make ANY requests.

answered Mar 15, 2016 at 4:08

drewwyatt

5,99915 gold badges68 silver badges109 bronze badges

2 Comments

Rafael Over a year ago

Any ideas on how to do that?

Ojonugwa Jude Ochalifu Over a year ago

Wrong, it MUST not be added on the server side, you just need to modify your requests by adding the right headers. You don't have access to every server you make requests to. This is misleading.

Sibiraj · Accepted Answer · 2017-04-12 06:12:29Z

Another simple way, without installing anything

HTTP function

authenticate(credentials) { let body = new URLSearchParams(); body.set('username', credentials.username); body.set('password', credentials.password); return this.http.post(/rest/myEndpoint, body) .subscribe( data => this.loginResult = data, error => { console.log(error); }, () => { // function to execute after successfull api call } ); }

Create a proxy.conf.json file

{ "/rest": { "target": "http://endpoint.com:8080/package/", "pathRewrite": { "^/rest": "" }, "secure": false } }

then ng serve --proxy-config proxy.conf.json (or) open package.json and replace
```
"scripts": { "start": "ng serve --proxy-config proxy.conf.json", }, 
```

and then npm start

That's it.

Check here https://webpack.github.io/docs/webpack-dev-server.html for more options

Luca Basilico · Accepted Answer · 2017-09-04 14:02:17Z

If you are creating a mock-up with SoapUI,a free testing tool for REST and SOAP request and response, for Angular 2+ application you should remember to set inside your http header request

 Access-Control-Allow-Origin : *

I add two images for helping your insert. The first shows the header you should add. If you want to add the header before you have to click the plus button(it's green).

The second image shows the insert the *. The value * permits to accept all the request from different hosts.

After this work my Angular application removed this annoying error in my console.

A big recourse that helped me to understand for creating my first mock up is this video. It will help you for creating a new mock-up inside SoapUi's environment without a server-side.

Jason Aller · Accepted Answer · 2017-11-22 18:28:22Z

I got the same error and here how I solved it, by adding the following to your spring controller:

@CrossOrigin(origins = {"http://localhost:3000"})

Jakob Pennington · Accepted Answer · 2018-04-09 13:18:59Z

I had the same problem when I was practising Angular5. Then I came across https://spring.io/guides/gs/rest-service-cors/ which helped me to resolve the issue.

I have kept @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") on my request mapping method. We can also configure this globally in spring boot application.

J. Jerez · Accepted Answer · 2020-05-08 16:23:56Z

this is server configuration, set up config.addAllowedHeader("*"); in the CorsConfiguration.

Rameez Rami · Accepted Answer · 2018-11-07 05:17:30Z

Most of the time this happens due to the invalid response type from server.

Make sure the following 2 to avoid this issue..

You don't need to set any CORS headers in Angular side. it very well know how to deal with it. Angular expects the return data to be in json format. so make sure the return type is JSON even for the OPTIONS request.
You Handle CORS in server side by using CORS header which is very self explanatory or you can google how to set CORS headers or middlewares.

Collectives™ on Stack Overflow

No 'Access-Control-Allow-Origin' header in Angular 2 app

13 Answers 13

3 Comments

1 Comment

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

3 Comments

1 Comment

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related