3

I make this API request , using axios in ReactJS

 axios.post(`${API_URL}/valida_proximo`, { id: images.map(image => image.id) }, getAxiosConfig()) // this.setState({ images, loadingAtribuiImagens: false}) }

It works really well in Google Chrome, but on Firefox I receive an error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/valida_proximo. (Reason: CORS request did not succeed).[Learn More]

What can I do?

This is my API

 @blueprint.route('', methods=['POST', ]) @jwt_required() def index(): if request.json: id_usuarioImagem = request.json.get('id') imagens_selecionadas = UsuarioImagem.query.filter(UsuarioImagem.id.in_(id_usuarioImagem)).all() if imagens_selecionadas: for imagem_selecionada in imagens_selecionadas: imagem_selecionada.batido=True db.session.commit() return 'ok', 200 return 'error', 400
Improve this question
2
  • Does axios.post support CORS? github.com/axios/axios/issues/1358 With fetch(), I know I need to add 'credentials': 'same-origin' to the args to make CORS work. But, I can't find an equivalent option for axios. There are also many, numerous other things that could go wrong with CORS, but, this is where I would start. Commented Sep 25, 2018 at 20:01
  • if your app runs on a secure context (https) this might relate with the following Firefox bug: bugzilla.mozilla.org/show_bug.cgi?id=1376310 Commented Apr 25, 2019 at 9:32

5 Answers 5

Reset to default
1

CORS errors are usually associated with cross domain requests and something not configured to accept a request on the recipient side of the request. The fact that chrome is working but firefox doesn't seems rather strange.

This was a method I used:

  • Open Firefox browser and load the page.
  • Perform the operation which is throwing Cross Origin Request Security (CORS) error.
  • Open firebug and copy the URL which is throwing Cross Origin Request Security (CORS) error.
  • Load the same URL in another tab in same Firefox browser.
  • Once you open the URL in another tab will ask you to add the certificate.

After adding the certificate will resolve Cross Origin Request Security (CORS) error and now you will not be getting this error.

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

Comments

0

I'm not too familiar with Axios, but it looks like you're making a post request from your React to your Flask backend. If the front-end and the backend are on different ports (like your Flask seems to be on PORT 5000), then you're making a CORS request.

With CORS, depending on what you're posting, you might need to include some Access-Control headers in your Flask response object. You can do this either manually, or just pip-installing and using the 'flask-cors' package. Import the package into your app factory and use it like so (see their docuementation for more info):

from flask_cors import CORS def create_app(test_config=None): app = Flask(__name__, instance_relative_config=True) CORS(app)

The request might also get 'preflighted' with an 'OPTIONS' request, also depending on the nature of your POST. More information would be helpful

Improve this answer

3 Comments

I already have flask CORS installed. When the request is made, it send the OPTIONS request (127.0.0.1 - - [26/Sep/2018 12:22:32] "OPTIONS /valida_proximo HTTP/1.1" 200 -) but only that. On chrome, for example, it sends the OPTIONS request and then sends the POST request.
If its sending an OPTIONS request, then you need to make sure the route on your flask sever accepts OPTIONS method, not just the POST method as you have written. Are you working with cookies? Please include some more information about your setup
Also, from your Chrome error, it looks like your Axios is set to "same-origin" when you seem like you're trying to use CORS. Not to familiar with axios but you should probably configure that
0

This is a bug in firefox. if you follow the link (MDN) in the error msg . you will find:

What went wrong?

The HTTP request which makes use of CORS failed because the HTTP connection failed at either the network or protocol level. The error is not directly related to CORS, but is a fundamental network error of some kind.

which i read as the connection failed and not a problem with CORS settings. you will just have to ignore the error message until firefox gets it fixed.

The error has something to do with refreshing the page and long polling requests or service workers and polling requests.

Improve this answer

1 Comment

It's not saying it's a Firefox bug; MDN is a reference guide for various web topics. In this case, it's saying the problem is with the backend server. I had an error like this, tried accessing the API directly (outside of frontend code) and found it didn't connect at all. The problem was a misconfigured server file in Python (I had configured it for localhost so it stopped working on a hosted web server). For anyone else who encounters this not-so-helpful error message!
0

If anyone sees this question again, I had this problem because I made a request to https://url instead of http://url

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
0

You should also ensure you don't have any adblockers running on the page. Especially if you notice it occurring in one browser and not another one.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.