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!
Related
The prologue:
I am trying to pull a layer into my arcgis-js-api application and I'm having a hard time. The layer is here:
https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer
And I am trying to add it in this way:
export const SC2Sept29 = new MapImageLayer({
url:
'https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer/547',
});
When running my app, I get the classic CORS error
Access to fetch at 'https://maps.disasters.nasa.gov/ags04/rest/services/ca_fires_202008/sentinel2/MapServer?f=json' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This is coming from this codepen, but the same happens when developing locally with vscode live server, or webpack-dev-server. This does not happen with other layers, just from layers on the maps.disasters.nasa.gov server.
trying to set up a proxy
I got some advice from the thread CORS error when trying to access NASA layer that I need to set up a proxy for anything coming from this server. Their advice was to follow these instructions to set up a proxy, and to use one of arcgis's ready-made proxies. Personally, I am finding the instructions for the proxies repo to be lacking. All of my experience in setting up server-side apps is with nodejs, and I am not understanding the instructions for how to do this. The codepen I linked, for now, tries to use the CORS anywhere proxy but setting it in the esr/core/urlUtils:
urlUtils.addProxyRule({
urlPrefix: 'maps.disasters.nasa.gov',
proxyUrl: 'https://cors-anywhere.herokuapp.com',
});
But this gives an error saying that Unexpected token T in JSON at position 0. I can see in the network tab that the browser is indeed attempting to access the correct layer URL, correctly prefixed by the cors anywhere proxy URL. But the response itself is just the text of the cors anywhere proxy, hence the error:
As I mentioned my dev environments are vscode live server and a webpack dev server, depending on what part of the app im building. My target production environment is github pages - I didn't really expect this app to need a back end. If I need a server side to provide a proxy, I can host it on heroku or even AWS as a full stack app. When trying to use the pre-provided arcgis proxies, I get the same issue. For example, I cloned their proxies repo to my directory:
When configuring urlUtils to refer to one of these proxies, it does so, but just returns the text content of the proxy file and gives me the Unexpected token T in JSON at position 0 error. There's a lot of chat on the esri forums about IIS, but I'm a mac guy and have no experience with that. Esri offers proxies in .NET, java, or PHP, none of which I have experience in.
How can I get rid of these cors errors and properly pull layers from the nasa server into my app. If I need a proxy, how can I set one up that will work for both my dev and production environments? I have had a hard time finding tutorials at my level that apply to this scenario. Thanks for reading.
Ok, I think now we can summarize.
In order for this to work you need to set a proxy. Like you mention ESRI provides some implementations on different techs.
I fork their repository in order to include an easy test setup using docker and docker-compose. resource-proxy fork
After clone it run,
sudo docker-compose -f docker-compose.php.yml up -d --build
Test proxy,
http://localhost:8082/proxy?ping
In their you will also find and example nasa-service.html that shows a correct configuration of the application and the proxy (all in PHP folder).
Just need to run http://localhost:8082/nasa-service.html.
The key thing here is that the application needs to be in the same origin that the proxy.
Hello fellow developers and data scientists. I have a question about a problem with accessing the API deployed on the google app engine from the javascript app deployed on Heroku.
When I access my API link on google chrome, it works properly. However, when I use my javascript app deployed on Heroku to call my API link, it sometimes does not work and return me the network error. CORS error
I have followed the instruction on "https://cloud.google.com/appengine/docs/standard/python3/config/appref" to enable the CORS access on my app API in the app.ymal file on google app engine as the following
runtime: python37instance_class: F4_1Ghandlers:
- url: /images
static_dir: static/images
http_headers:
Access-Control-Allow-Origin: ‘*’
Similarly, I have also enabled the CORS access on my javascript app (React) deployed on Heroku as shown in the picture attached. CORS enabled on Heroku However, the problem still persists. I am not sure if it has to do with the way we set up our code or the google app engine server itself. If there is anything I could do besides what I have done I would love to hear that as well. Thanks a lot!
The instructions listed on the google cloud documents (CORS Support) apply only to static assets (such as images). However if you want to call your API (which consists of dynamic pages like Python scripts) you have to do the configuration on the Python side, by sending the appropriate headers from your scripts. Here's an example on how to do it by using a Flask extension called Flask-CORS:
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
#app.route("/api/v1/users")
def list_users():
return "user example"
The way to do it on your own script really depends on your implementation.
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 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).