I was doing put and post operations with axios in React Native before. But then I got the following error. I'm sending cookies in the headers, but it doesn't solve the problem. Help me please.
I try to send any request to my API from ReactJs application. Localy it's work fine but on Heroku any request returns 204 code. If I try manualy get response from requested string, It's also returns correct result.
It doesn't work because you aren't doing a HTTP GET request.
You are doing HTTP OPTIONS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS
Attached image shows how it can be done.
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
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.
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
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.
If anyone sees this question again, I had this problem because I made a request to https://url instead of http://url
I am getting response status of 503 on a No Access-Control-Allow-Origin header error in the browser but Angular 1.5.5. $http is getting a status of NULL (-1). Is there any way for me to get the actual 503 error in Angular? Thanks.
please add it(Allow-Control-Allow-Origin: *) to browser from the browser store (App) section,
then check it again...
Thanks.
I'm using OpenFire with the REST API plugin installed.
I'm attempting to get a list of chat rooms through an AngularJS $http call to http://localhost:9090/plugins/restapi/v1/chatrooms
with the proper Authorization header set in the $http.defaults.headers.common property.
When the call is made, I get the following error:
OPTIONS http://localhost:9090/plugins/restapi/v1/chatrooms 401 (Unauthorized)(anonymous function) # angular.js:10722sendReq # angular.js:10515serverRequest # angular.js:10222processQueue # angular.js:14745(anonymous function) # angular.js:14761Scope.$eval # angular.js:15989Scope.$digest # angular.js:15800(anonymous function) # angular.js:16028completeOutstandingRequest # angular.js:5507(anonymous function) # angular.js:5784
XMLHttpRequest cannot load http://localhost:9090/plugins/restapi/v1/chatrooms. Response for preflight has invalid HTTP status code 401
The truly annoying issue is, that when I build the same request through Postman, it works perfectly and the expected response is received but inside the browser (whether through $http, or a call to window.fetch through the console) I keep getting that error.
Supposedly, the OpenFire REST API supports CORS (I went so far as to check the plugin source code), but nothing seems to help.
I'm the developer of REST API plugin. You are right that the REST API supports CORS, and it is possible to call it directly from angular js. The mentioned problems (preflight request) will by done by your browser. I just fixed the issue that the OPTION request don't need to auth.
Checkout the REST API version: 1.1.7
I suggest you to compare the fiddler request and the browser request (headers + body).
It should work if they are 100% identical..