I am getting CORS issue in Angular 5 app even though i get response from the server

Question

I am using Angular 5 in my ionic app. I am trying to call a endpoint from my code

ngOnInit(): void {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this.httpClient.get('https://abc-66b76.cloudfunctions.net/getBillNo', {
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    }).subscribe(data => {
        console.log('firebase bill No: ', data);
        this.bill.billNo = data.billNo;
    })
}

When my page loads the above code is called and in chrome browser console i get the below error:

Failed to load https://abc-66b76.cloudfunctions.net/getBillNo: 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:8100' is therefore not allowed access.

However if i check my network tab in my chrome browser i can see that it has hit the server and has got the response.

Can anyone help me resolve this.

My Backend is firebase functions.

are you putting `headers: { 'Access-Control-Allow-Origin': '*'}` in the **request** header? that's not how cors works, the server needs to send `Access-Control-Allow-Origin: *` in its **response** — Jaromanda X, Jun 18 '18 at 05:03
adding that header by the way, triggers the CORS preflight sequence - and if the server doesn't handle CORS preflight, then the fact that you're putting a bogus header in the request could be your issue ... step 1, remove that header in the request ... then see if you still get a CORS error, if so, then the **server** needs to send that header — Jaromanda X, Jun 18 '18 at 05:05
`However if i check my network tab in my chrome browser i can see that it has hit the server and has got the response.` - yes, because the console can see more than your code - it's a useful debugging tool, not a mirror of what your code can see — Jaromanda X, Jun 18 '18 at 05:06
cors is implemented on 2 places client side in browser and on server ..so unitil you get ans disable cors check in browser — vijay, Jun 18 '18 at 05:08
Initially I had tried without any headers.. by default the server is set to respond for requests from any origin.. — Chetan, Jun 18 '18 at 05:12
if this only happen when you are working with locally might be you could solve your problem by using this [Chrome extension](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) — coder, Jun 18 '18 at 05:44

score 1 · Answer 1 · answered Jun 18 '18 at 09:25

There's nothing to do in your Angular code. To make it working you need to either

Host your Angular code in https://abc-66b76.cloudfunctions.net (port 443) along with your backend

or

You need to allow your Angular hosted origin (in your case http://localhost:8100) in backend's Access-Control-Allow-Origin header (or * to allow all origin). Modern browsers verifies this and blocks requests in case this header is not present when cross-origin requests are performed for security considerations.

The way you set this header depends on your backend programming language. if you use NodeJS + express

var cors = require('cors')
var app = express()
app.use(cors())

If the backend is not under your control, You can also tell your browser to ignore doing it. Each browser would have a way to do it.

For chrome, Start chrome browser with --disable-web-security command line param (kill all running chrome instance).

A simple chrome extension can be used to do the magic (read its instructions) https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?hl=en

If you are going to provide the Angular app for public then you should consider Adding the header or have a proxy for the backend and make requests via proxy, since you can't force each users to disable web security.

score 0 · Answer 2 · answered Jun 18 '18 at 05:08

You probably need to do a proxy server, to avoid CORS when call api from localhost in development environment, so nodejs is a simple approach to make it, I really recommend you this post, it's simple to understand and easy to follow.

https://codeburst.io/using-nodejs-as-a-proxy-for-angularjs-ajax-requests-8e5e94203e0d

score 0 · Answer 3 · answered Jun 18 '18 at 05:39

I found the easiest way is to use the node.js package cors. The simplest usage is:

var cors = require('cors')
var app = express()
app.use(cors())

There are, of course, many ways to configure the behavior to your needs; the page linked above shows a number of examples.

I am getting CORS issue in Angular 5 app even though i get response from the server

3 Answers3