Getting CORS error in angularJS front end

Question

I am using a flask server with an angular front end. Up until recently, I was running the project on my local and had no issues.

I now moved my project to a remote server and have been getting the following error. I am not sure what i'm doing wrong:

My error:

XMLHttpRequest cannot load http://ec2-..../api/loginStatus/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503.

The snippets of my flask server side code (where I am adding my headers to the response is given below):

@app.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin','http://localhost:8100')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
    response.headers.add('Access-Control-Allow-Credentials', 'true')
    return response

I use both restangular and $http methods in my front end angularjs.

I have added the following lines in the .config of my main module:

.config(['RestangularProvider', '$stateProvider', '$urlRouterProvider','$httpProvider',
  function(RestangularProvider, $stateProvider, $urlRouterProvider,$httpProvider) {

        //$httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = "http://localhost:8100";
        $httpProvider.defaults.withCredentials = true;
        $httpProvider.defaults.headers.common = 'Content-Type: application/json';
        delete $httpProvider.defaults.headers.common['X-Requested-With'];

Would someone be able to help me out here? I've referred to a lot of material and I am not sure what i'm doing wrong.

PS: I am getting 200 status messages on my server. I am therefore assuming that the error is in my front end and not my server side. Please correct me if I am wrong

Regards, Sunil

EDIT

Hi everyone, I have solved the issue. I would like to thank @Mathijs Segers and @Hassan Mehmood for their inputs.

It turns out that there was a nginx configuration issue which led to the server becoming unavailable.

Firstly, there was an issue with the symbolic link that was being created for the flask backend (I am running my server side through a git repo on /home/username and then creating a symbolic link at /var/www/sitename.com

I was also throttling the number of requests that can be sent in a second (users could send only 1 every 2 seconds) resulting in the 503 error.

The original code I put up worked fine after I fixed it.

Glad it works, have a good day – Mathijs Segers Aug 02 '16 at 08:10 — Mathijs Segers, Aug 02 '16 at 08:10

Mathijs Segers · Accepted Answer · 2016-08-02T06:57:45.897

2

Eyooo, it is actually on your server side. You need to provide correct headers.

So you've tried this, I have no experience with flask but this I don't like;

response.headers.add('Access-Control-Allow-Origin','http://localhost:8100')

for testing purposes I suggest you just change the http:// part, to * so

 response.headers.add('Access-Control-Allow-Origin','*')

If that doesn't work verify that the header is actually being set, you could use a different program which doesn't care for CORS like postman or directly calling it in the browser if it doesn't depend on Accept headers.

here is some more readings about what it all is about. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

EDIT:

Ok silly of me: The response had HTTP status code 503. This part in the error actually states what kind of response your server is giving, so currently there is an error on your server side. This happens when it is f/e down or what not.

So it seems that you're not doing anything strange, but your server side seems broken.

XMLHttpRequest cannot load http://ec2-..../api/loginStatus/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503.

So this error here, I suggest looking at your headers, and maybe disable some. You currently allow only 2 request headers that might cause some issues as well?

edited Aug 02 '16 at 06:57

answered Aug 02 '16 at 06:48

Mathijs Segers

5,557
9
44
69

Hi Mathijs, I get an error when I use * since I am using use credentials. I'll check it again and reconfirm though. – galeej Aug 02 '16 at 06:51
See my edit, the error you're getting suggests your server actually has an issue. – Mathijs Segers Aug 02 '16 at 06:53
So Even your first configuration with the port was actually correct – Mathijs Segers Aug 02 '16 at 06:53
Hi Mathijs, I get the following error when I use * in the server side code: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8100' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute. – galeej Aug 02 '16 at 06:55
Allright this I can't help you with since I don't know flask. I suggest seeing if you need all those headers and disabling a few which you are not sure of or such. The 503 still suggest something else is wrong and your first config was just fine. for acces control – Mathijs Segers Aug 02 '16 at 06:57

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Flask-CORS

A Flask extension for handling Cross Origin Resource Sharing (CORS), making cross-origin AJAX possible.

Installation

Install the extension with using pip, or easy_install.

 $ pip install -U flask-cors

Simple Usage

In the simplest case, initialize the Flask-Cors extension with default arguments in order to allow CORS for all domains on all routes. Read More.

from flask import Flask
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Reference: https://flask-cors.readthedocs.io/en/latest/

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 02 '16 at 07:14

Hassan Mehmood

1,302
1
10
20

Hi Hassan, I have tried this as well :(. I'll past the error message i got when I tried this.. – galeej Aug 02 '16 at 07:19
`http://ec2-.../api/loginStatus/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503.` – galeej Aug 02 '16 at 07:24
I have even tried using @cross_origin in the routes. I get the same error. I am inclined to think that the error is a front end issue due to my getting 200 responses in the server side. – galeej Aug 02 '16 at 07:28
$httpProvider.defaults.headers.common = 'Content-Type: application/json'; – Hassan Mehmood Aug 02 '16 at 07:31
The above line overriding your $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = "http://localhost:8100"; line – Hassan Mehmood Aug 02 '16 at 07:32
Please check again – Hassan Mehmood Aug 02 '16 at 07:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118871/discussion-between-galeej-and-hassan-mehmood). – galeej Aug 02 '16 at 07:34
You are not using the cross_origin, why the import – thebeancounter Jan 23 '20 at 20:14
@thebeancounter I copied the snippet from my code. Forgot to remove that one! – Hassan Mehmood Feb 01 '20 at 15:49

Getting CORS error in angularJS front end

2 Answers2

EDIT:

Flask-CORS