firefox does not allow CORS request

Question

vuejs is running inside a docker container served by:

CMD [ "http-server", "dist" ]

when using axios inside Vue.js mounted() to do a GET request against a flask api it shows "blocked" in the network tab, accessing other REST-API's works fine.

testing with curl (localhost:6000 being the flask server):
- curl is running from my real host and conneting to the container

curl -H "Origin: http://localhost:5000"   
-H "Access-Control-Request-Method: GET"   -H "Access-Control-Request-Headers: X-Requested With"   
-X OPTIONS --verbose  http://localhost:6000/todo/api/v1.0/wheel/40  

*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 6000 (#0)
> OPTIONS /todo/api/v1.0/wheel/40 HTTP/1.1
> Host: localhost:6000
> User-Agent: curl/7.58.0
> Accept: */*
> Origin: http://localhost:5000
> Access-Control-Request-Method: GET
> Access-Control-Request-Headers: X-Requested-With
> 
* HTTP 1.0, assume close after body
< HTTP/1.0 200 OK
< Content-Type: text/html; charset=utf-8
< Allow: OPTIONS, GET, HEAD
< Access-Control-Allow-Origin: http://localhost:5000
< Access-Control-Allow-Headers: X-Requested-With
< Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
< Vary: Origin
< Content-Length: 0
< Server: Werkzeug/1.0.0 Python/3.8.2
< Date: Sun, 15 Mar 2020 15:43:44 GMT
< 
* Closing connection 0

from what ive read so far, for example here: 1, for a unauthorized GET request the headers look ok.

This one gets the real data:

curl -H "Origin: http://l:5000"   -H "Access-Control-Request-Method: GET"   -H "Access-Control-Request-Headers: X-Requested-With"  -v http://localhost:6000/todo/api/v1.0/wheel/40 
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 6000 (#0)
> GET /todo/api/v1.0/wheel/40 HTTP/1.1
> Host: localhost:6000
> User-Agent: curl/7.58.0
> Accept: */*
> Origin: http://l:5000
> Access-Control-Request-Method: GET
> Access-Control-Request-Headers: X-Requested-With
> 
* HTTP 1.0, assume close after body
< HTTP/1.0 200 OK
< Content-Type: application/json
< Content-Length: 39
< Access-Control-Allow-Origin: http://l:5000
< Vary: Origin
< Server: Werkzeug/1.0.0 Python/3.8.2
< Date: Sun, 15 Mar 2020 15:56:43 GMT
< 
{"result":{"model 1":0,"model 2":150}}
* Closing connection 0

Manipulating -H "Origin..." to this:

-H "Origin: http://l:5000"

also shows a normal reply. Isn't that a good test?

score 0 · Accepted Answer · answered Mar 19 '20 at 08:17

As it turns out mozilla allows certain ports for certain protocols as shown here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_Port_Blocking

6000 is the "x11" port and on that list - As port for x11 and not to be used for xhr. So every port not on that list should do the trick.
reason:
Cert issued a Vulnerability Note VU#476267 for a "Cross-Protocol" scripting attack, known as the HTML Form Protocol Attack

score 0 · Answer 2 · answered Mar 19 '20 at 09:48

0

In your app's __init__.py file add these lines and you'll be good to go.

$ pip install flask-cors

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

firefox does not allow CORS request

2 Answers2