From my Angular client, i am invoking another application URL which will return a JSON object.
When i try in IE11 , it works fine but in Firefox and Chrome, i get:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header 'Access-Control-Allow-Origin' missing).
I tried to add the Access-Control-Allow-origin in the header, i started get CORS Request Failed.
How can i handle this scenario in my angular 1.5 application?
Access-Control-Allow-origin
First of all it has nothing to do with angular. You make an request to backend and your backend response to the request.
CORS Filter Missing Angular there is no CORS Filter Missing Angular in angular but in your api. You need to set CORS Filter in your api so your angular application can make a request and api can response to that.
This picture describe how cors filter works
Related
I'm building a react.js app and I think I have CORS issues but I can't create a server. I'm therefore using a proxy (such as this one https://cors-anywhere.herokuapp.com/${myApiEndpointHere}).
When I'm using Chrome, I'm able to successfully fetch the data. However when I'm using Firefox or Safari, I get these issues listed below. This CORS issue (on Firefox and Safari) seems also to only happen when the scroll is triggered because both for Firefox, Safari and Chrome, I'm able to get my content and log in to the console.
Firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg.
(Reason: missing token ‘user-agent’ in CORS header
‘Access-Control-Allow-Headers’ from CORS preflight channel).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg.
(Reason: CORS request did not succeed).
TypeError: NetworkError when attempting to fetch resource.
Safari:
Request header field User-Agent is not allowed by
Access-Control-Allow-Headers.
Fetch API cannot load
https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg
due to access control checks.
https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg
Failed to load resource: Request header field User-Agent is not
allowed by Access-Control-Allow-Headers.
Error: The error you provided does not contain a stack trace.
Unhandled Promise Rejection: TypeError: Request header field
User-Agent is not allowed by Access-Control-Allow-Headers.
You should read this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
And add this header to the response from the proxy server: Access-Control-Allow-Headers: *
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
cors request is failing
XMLHttpRequest cannot load
http://eampple.net/api/transactions?asset_id=76cb0099&payment_id=pay_6G28AnQUs6WkBK&plan_name=undefined.
The request was redirected to
'http://eampple.net/api/subscriptions/events?transaction_token=0364…8af7b4d98ee1f66d7ca0fbfd81b7e627781b6b81ba187e8e3d72ef49&asset_id=76cb0099',
which is disallowed for cross-origin requests that require preflight.
in side cors.js
i have set
allRoutes:true
,origin:'*'
for some request it working. but when i do redirect it is failing.
How are you doing redirecting in angular?
$window.location.href = href;
Was the only way I could get it to work with sails.
I'm trying to make a request to a remote server running with Sails JS (NodeJS) using AngularJS in the frontend and I'm getting this origin 'null' error:
XMLHttpRequest cannot load http://remoteserver:1337/login/. The 'Access-Control-Allow-Origin' header contains the invalid value ''. Origin 'null' is therefore not allowed access.
My request looks somethign like:
$http.post('http://remoteserver:1337/login/', { email: userData.email, password: userData.password});
Any ideas?
You nead the server to enable CORS (cross origin resource sharing),
from Sails.js cors documentation (http://sailsjs.org/documentation/concepts/security/cors)
To allow cross-origin requests from any domain to any route in your app, simply enable allRoutes in config/cors.js:
allRoutes: true
and here is a brief explanation about what CORS is and why it is needed:
http://enable-cors.org/index.html
does anybody know where I can set a header in Sailsjs?
I have to set the Access-Control-Allow-Origin header that I can use my sails instance as API.
Currently I get this error if I try to send a request via $http.get in AngularJs
[Error] XMLHttpRequest cannot load http://acreasyURL.io/signin. Origin http://myhostOnMyMac.io:8000 is not allowed by Access-Control-Allow-Origin.
Any idea?
Cheers!!
Normally, you don't have to set it manually.
Sails has some CORS functionality built in:
https://github.com/balderdashy/sails-docs/blob/bc148104378f1ad590a69220c25f60fe41a59790/config.cors.md