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, Mar 03 '17 at 02:25
This answer maybe useful: https://stackoverflow.com/a/58064366/7059557 — AmirReza-Farahlagha, Sep 23 '19 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. — Krishna, Mar 27 '20 at 17:06

score 47 · Accepted Answer · edited May 23 '17 at 12:18

47

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.

edited May 23 '17 at 12:18

Community

1
1

answered Mar 03 '17 at 02:30

Pablo Ezequiel Inchausti

16,623
7
28
42

2

How to do this in spring boot @Ezequiel? – Lahiru Gamage Feb 22 '18 at 11:45
4

Hi @LahiruGamage, `@CrossOrigin(exposedHeaders="Access-Control-Allow-Origin")` worked for me on the request mapping method. – Sudheer Kumar Apr 03 '18 at 17:15
1

Basically this helped me: `res.header("Access-Control-Allow-Origin", "");` – Mohammad Zaid Pathan Dec 31 '20 at 18:41

score 17 · Answer 2 · answered Mar 15 '16 at 04:27

17

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

answered Mar 15 '16 at 04:27

Nitheesh K P

1,090
8
17

2

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? – Jonathan Stellwag Jun 13 '18 at 10:32

score 9 · Answer 3 · answered Nov 02 '17 at 06:24

9

Simply you can set in php file as

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

answered Nov 02 '17 at 06:24

Prakash Pazhanisamy

997
1
15
25

score 9 · Answer 4 · edited Dec 14 '17 at 20:13

9

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();
    }

edited Dec 14 '17 at 20:13

klutt

30,332
17
55
95

answered Dec 14 '17 at 19:52

satish

157
1
2

Thank you, it was very helpful! – Uladzimir Sharyi Oct 25 '18 at 13:24
I refer [this answer](https://stackoverflow.com/a/27360022/5002329) for my asp.net web API to solve no-access-control-allow-origin issue. – Sushil Jadhav Nov 21 '18 at 08:47

score 7 · Answer 5 · edited Dec 21 '16 at 14:10

7

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.

edited Dec 21 '16 at 14:10

Shabbir Dhangot

8,954
10
58
80

answered Aug 06 '16 at 18:09

Abner

612
2
9
24

score 6 · Answer 6 · edited Jun 20 '16 at 08:48

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.

score 3 · Answer 7 · answered Mar 15 '16 at 04:08

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 '16 at 04:08

drewwyatt

5,989
15
60
106

6

Any ideas on how to do that? – Rafael Aug 15 '17 at 13:22
1

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. – Ojonugwa Jude Ochalifu Feb 05 '20 at 18:59

score 2 · Answer 8 · answered Apr 12 '17 at 06:12

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

score 1 · Answer 9 · answered Sep 04 '17 at 14:02

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.

score 1 · Answer 10 · edited Nov 22 '17 at 18:28

1

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

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

edited Nov 22 '17 at 18:28

Jason Aller

3,541
28
38
38

answered Nov 22 '17 at 15:34

Moh-Othmanovic

11
3

score 1 · Answer 11 · edited Apr 09 '18 at 13:18

1

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.

edited Apr 09 '18 at 13:18

Jakob Pennington

5
4

answered Apr 03 '18 at 17:19

Sudheer Kumar

473
1
7
21

score 1 · Answer 12 · answered May 08 '20 at 16:23

1

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

answered May 08 '20 at 16:23

J. Jerez

704
8
6

score 0 · Answer 13 · answered Nov 07 '18 at 05:17

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.

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

13 Answers13

Linked

Related