4

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.

enter image description here

Can anyone help me resolve this.

My Backend is firebase functions.

Improve this question
7
  • 2
    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 Commented Jun 18, 2018 at 5: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 Commented Jun 18, 2018 at 5:05
  • 1
    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 Commented Jun 18, 2018 at 5:06
  • cors is implemented on 2 places client side in browser and on server ..so unitil you get ans disable cors check in browser Commented Jun 18, 2018 at 5:08
  • Initially I had tried without any headers.. by default the server is set to respond for requests from any origin.. Commented Jun 18, 2018 at 5:12

3 Answers 3

Reset to default
1

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

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

or

  1. 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.