I am building a simple ionic/angular mobile app. I am using IntelliJ IDEA for development.
During development, I simply use 'ionic serve' command from Intellij terminal, to launch the mobile app in browser. The app connects to a REST service which is deployed on a Tomcat server.
When app tries to connect to REST service, it gives me the below error in browser console
XMLHttpRequest cannot load http://localhost:8080/MyWorkflows/rest/UserService/users. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 500.
I understand that this is happening as REST services are running on a different domain and hence browser blocks it. However, I am at a loss to understand how should I proceed?
Can someone please help.
In your REST service deployed on Tomcat you should set Access-Control-Allow-Origin: http://localhost:8100 and you need to allow the http request methods you use with Access-Control-Allow-Methods: POST, GET, OPTIONS.
This tells the browser that your service allows the web app running on http://localhost:8100 to access the service. The browser checks this on resource request. For http request methods other than GET there might be an additional Preflight Request added, so you need to have your WebService answering that as well.
See https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
If you do not control remote end, use Ionic CLI proxy server. There is very good how-to article on Ionic blog: Handling CORS issues in Ionic.
Related
I have a ReactJS UI that is served by a static NGINX web server and a Quarkus REST API server. Both are dockerized services, and the ReactJS app is supposed to use the Quarkus REST API to consume data/make requests. In the depiction below we can see this simple setup for my localhost dev enironment (both services are exposed and mapped to different localhost ports):
In the deployed production environment, these will services will likely correspond to different hosts/URLs. The problem is, even in the localhost setup i expectedly have the issue of CORS errors when i try to make calls to the REST API service from the ReactJS app running in the clients browser, e.g. during login:
I have to admit, i dont fully understand CORS in terms of where exactly one has to make changes/configs to allow them - but i was told i need to set them in the server i make requests to (which in this case is the Quarkus REST API). So i added this setting in the Quarkus app application.properties to just generally allow all requests:
quarkus.http.cors=true
(as shown in https://quarkus.io/guides/http-reference#cors-filter)
In reality i should probably change this to be more precise, however i still receive the same CORS error in my browser when running the react web app. I understand that i could also configure a proxy in the NGINX server to tunnel requests to the other service container potentially, but i would like to solve this through CORS configuration. Where do i have to make which configurations for this to work? Did i make a mistake with the Quarkus config?
It seems you cannot only set quarkus.http.cors=true for it to work and allow all requests, as per the Quarkus documentation. In my case i had to add more configurations, i.e.:
quarkus.http.cors=true
# This allows all origin hosts, should be specified if possible
quarkus.http.cors.origins=*
quarkus.http.cors.headers=accept, authorization, content-type, x-requested-with
quarkus.http.cors.methods=GET, POST, PUT, DELETE, OPTIONS
The setup:
Service A (frontend): GAE serving static site, all calls made from A are happening on client side.
Service B (api): GAE instance hosting REST API.
Without Identity Aware Proxy, I am able to make requests from the clientside of the frontend to the api on a different hostname by setting CORS to allow calls from the service A hostname.
I would like to be able to do the same thing while both services are behind Identity Aware Proxy.
Following the instructions in IAP docs I have:
Set my app to respond the OPTIONS requests
Changed the setting access_settings.cors_settings.allow_http_options to true using gcloud CLI.
Here is the error I'm facing:
Access to XMLHttpRequest at 'https://api-dot-my-app-dev.appspot.com/api/123' from origin 'https://frontend-dot-my-app-dev.appspot.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
When I make the same requests from localhost to localhost or from service A (client side) to localhost api the requests succeed.
This leads me to believe that the issue is related to Identity Aware Proxy. My only guess is that it's related to the preflight request, which I don't see anything about in the network requests in the browser console.
I would really like to be able to keep both apps behind IAP with their own hostnames while still communicating. Unfortunately, I have about exhausted ideas for how to do this.
In the meantime I have it working using alternative #2 below for now.
Alternatives:
Have the API serve the static site so they are on the same hostname
Use dispatch.yaml to serve both sites from the same hostname
Any ideas if this is possible or what might be going wrong?
Edit: Here is a repo to demonstrate my problem.
Edit 2: According to this article, this functionality used to work and Google said it would be a good idea to support it but offered not timeline.
Not sure if that can be applied on your use case but I have seen this kind of issue being resolved by allowing CORS preflight request to be passed through IAP by changing the access_settings.cors_settings.allow_http_options to true.
I am running into an issue with my Reactjs app that interfaces with Web API 2 deployed to Azure with Microsoft Authentication where my initial GET request throws an error that says:
Fetch API cannot load https://login.live.com/oauth20_authorize.srf?
client_id=[...]&redirect_uri=[MY_REDIRECT_URL].
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin '[MY_AZURE_SITE]' is therefore not allowed access. If an opaque response serves
your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I am really new to Azure and using React so I am unsure where i went wrong here. The weird part about this issue is that if I turn of Microsoft Authentication for my app it works as expected.
I have been stuck on this issue for a little while now, and am not really sure where I am going wrong. I also am not sure what information would be useful to help troubleshooting this issue so please feel free to comment asking for code/information and I will to update my question.
You are trying to get content from a different URL then your site originally host.
For security reasons APIs set some rules for requests. To be able to make requests you need to set up CORS. There for you need to set up appropriate headers for your requests.
You can read more about CORS here
A resource makes a cross-origin HTTP request when it requests a
resource from a different domain, protocol, or port to its own. For
example, an HTML page served from http://domain-a.com makes an
src request for http://domain-b.com/image.jpg. Many pages on the web
today load resources like CSS stylesheets, images, and scripts from
separate domains.
For security reasons, browsers restrict cross-origin HTTP requests
initiated from within scripts. For example, XMLHttpRequest and Fetch
follow the same-origin policy. So, a web application using
XMLHttpRequest or Fetch could only make HTTP requests to its own
domain. To improve web applications, developers asked browser vendors
to allow cross-domain requests.
I am developing mobile application using IONIC framework and I want to access SOAP based web-service, i have found this TUTORIAL.
I am accessing publicly deployed soap based web-service. I have tested the mentioned SOAP based web-service in SOAP-UI and i am able to access the web-service, but when i am accessing the same web-service from ionic framework, it throws an exception:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.webservicex.net/globalweather.asmx?wsdl. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Can anyone let me know whats the issue?
CORS is something that is enabled on the server. you have to make sure that the headers that are sent by the queried server have
Access-Control-Allow-Origin *;
Once that is done, the issue should be resolved. The XML request is being blocked in your case, because these headers are not present in the server response.
More info can be found here, http://www.w3.org/wiki/CORS_Enabled
BUT
For development purpose you can try to use chrome extension as workaround in your development phase.
try it:
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
NOTE: In Production you should enable it on your server side.
But during development, you can try plug-in to disable security.
It might be the whitelisting problem. Install ionic whitelist plugin via this command:
ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git
Try whitelisting all network traffic via in your 'config.xml':
<allow-navigation href="*" />
Thou , this practice of is usually not recommended.
More info here: http://docs.ionic.io/docs/cordova-whitelist
I am implementing (I am trying to implement) a 100% client side AngularJS web app which should access the google calendar API. Of course, this doesn't work because I hit the cross domain problem:
XMLHttpRequest cannot load http://... . Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.
Is there any solution to bypass this issue, except creating a proxy? By setting some header or changing some google configuration? I don't see one ...
Great hint Philipp! The google javascript api client (see here) does the job.
But I am wondering: How does the google javascript api client bypasses the cross domain issue? Does someone know?
You need googles side to return the right headers, Access-Control-Allow-Origin, to your browser so it doesnt complain about the cross browser issue.
Make sure in the google cloud console is configured correctly to web application. Im assuming web app because the redirect though.
If its a phoneapp or not serving anything on localhost:9000 redirect endpoint there are other options. For example you could open up the oauth redirect in another window, still use localhost:9000 as the redirect. Even though you are not listening at that port you could still grab the url code or error that is set on the redirect from the parent window.
CORS is an issue that you will experience when running the app through web browsers. I suggest you download a CORS toggle extension on google chrome so you can toggle off CORS and the API will connect. Good luck!