I have a Nginx webserver in front of a Node REST API delivering JSON formatted data.
I also have a web app which consumes the above API and works fine for a majority of the requests it makes but sometimes, for certain URLs, the client gets a CORs error aka an 'Access-Control-Allow-Origin' error.
When I call the data again from the server of the web app it works fine again.
Could anyone shed some light on this issue.
I am using axios to call the API from the web app
You need to add CORS headers in response so that api can be accessed from browser.
You can use npm cors package https://www.npmjs.com/package/cors
Related
I'm working on an assignment which needs a python backend and react.js frontend. While both of those parts are working fine individually, I am having some problems dealing with the interaction between the two.
I am using a flask based python REST API for the backend. When the API is hosted on pythonanywhere it works with the frontend perfectly. The problem is that the implementation should be able to be run locally and offline. I tried running the API on localhost:5000 and the front end is running via npm localhost:3000. When I try to access the API this way I get the error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/list/all. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘True’).
I had a similar problem for the hosted version, but using Simple Requests fixed that. The same approach is not working here.
I would appreciate any advice you have.
Thanks in advance.
Edit: Found a solution. I used flasks jsonify method. It turns out the problem was that the data was text and this caused the CORS problem
I'm creating a Progressive web app and need to make requests to an API which is HTTP and doesn't have HTTPS. Can't change the app to HTTP as PWA's require HTTPS, can't change request link to https.
Getting this error:
Mixed Content: The page at 'https://current-site.herokuapp.com/' was
loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://the-api.com/api/customer?$filter=contains(CustomerName,%20%27test%27)&$select=CustomerName,CustomerId&$top=10'.
This request has been blocked; the content must be served over HTTPS.
Hoping there's a way around this. Currently using nodejs and express to serve. Requests are being made from frontend vuejs with axios.
Thanks for helping.
Shy of using an insecure or old browser, or telling your users to use some command line flags before surfing the web, there is not a direct method for this. This is by design and would be a major security flaw if apps could do this directly.
However, if you're determined to use the insecure API, you can write an HTTPS proxy API on your server, that turns around and does the request to the real API over HTTP.
I'm trying to perform an ajax request to a third party api from my web site using javascript (On the client side) and I receive a No 'Access-Control-Allow-Origin' error. When trying to access this from node.js project everything is working fine.
More over, when opening Chrome with --disable-web-security everything is working fine as well.
Any information about this issue will be appreciated :-)
You cannot access a third-party API without using CORS. CORS adds special headers (e.g. Access-Control-Allow-Origin) to the HTTP response. This makes sure, that the API can control which front-end can make a request to it. This means, however, your API needs to recognize your front-end URL and accept requests from it.
You can (a) use CORS on the API side (changes are necessary on the API) or (b) use your server-side language to make the API request (e.g. PHP makes the request to the API and the front-end receives the response from the PHP back-end). Everything else is prohibited by the browser's security settings.
You can read more about CORS e.g. here.
I have a VueJs app with a Laravel backend as the API.
When running locally the app works as expected with https, however when on the production server I get the Requested an insecure XMLHttpRequest endpoint message.
My server is on Digital Ocean, has been setup with RunCloud and has SSL enabled through LetsEncrypt.
The application can be viewed here: https://vehicletrader.sweney.co/#/
Please note at this stage theres is no authorization surrounding the API.
Any advice would help.
A slash / at the end of the request URL was the cause of this for me.
My axios call was a simple axios.post('https://getShafiq.com/hello/').
Locally, it was working.
But on prod server behind CloudFlare, it would return insecure XMLHttpRequest.
What I noticed in the 'Network' tab of my browser's dev tools is that the URL is returning a 301 - Moved Permanently and right after it, the error about the insecure endpoint.
I removed the / after /hello and boof, it works.
Locally, my Angular 1.x web app has no problem communicating with a RESTful API I have running on my machine. However, when I launch the API and web app into production, I get the following error:
XMLHttpRequest cannot load https://api-domain-name-removed/api/common/protected/locations?l=1000. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values ',,*', but only one is allowed. Origin 'https://client-domain-name-removed' is therefore not allowed access.
I also see this OPTIONS request failure:
However, when I use Postman, I am able to make a request against the production API without problems:
Any ideas why the request is failing from the web app?
Please note that in production, the API is running with nginx reverse proxying to an Express app, and the web app is running inside a Docker container. Also note that this same error occurs in both Chrome (v55) and Firefox (v47).