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.
Related
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
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'm using Ionic 3 to develop an app, but the problem is that all of the company's webservices is based in SOAP requests.
In the preview of the app, using ionic serve --lab, I tried to do ajax requests using Http Module, but every time that I do a request I get this error in the console:
XMLHttpRequest cannot load http://example.com/soapwebservice. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
Tried to used jQuery Ajax and XMLHttpRequest directly in the console too, but still get the error.
-- Edit
Found that when using ionic cordova run android --device to test in the device, the problem goes away. In the device the origin don't exist, because the app is run on file:///, and in the ionic serve the origin is in localhost, so it shows the CORS error.
Personally, my preference would be to write the Android "SOAP Client" in Java.
But it's still possible to consume SOAP services from JavaScript.
Here is a good tutorial:
SOAP Web Services in Angular and Ionic
This example uses "JavaScript SOAP Client": http://javascriptsoapclient.codeplex.com/
Finally found how to make it.
When using ionic cordova run android --device to test in the device, the problem goes away. In the device the origin don't exist, because the app is run on file:///, and in the ionic serve the origin is in localhost, so it shows the CORS error.
To fix this in ionic serve, I followed this amazing tutorial, that shows how to easily create a proxy in Ionic, and access other websites through that proxy.
It basically creates a path inside your localhost, like http://localhost/api, that points to the URL you want to access, so you won't get any CORS error, because you're accessing the same origin now!
It is very ease to configure. As the tutorial says, you just need to add the proxy configuration inside ionic.config.json file, like in the example:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
And now you can make Ajax requests to http://localhost:8100/api!
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).