Menu
I have been searching hours on this issue, but I still can't find any solution to this.
I am developping an App cordova (basicely HTML / JS) So : the app runs on mobile from the navigator, and I have trouble making an ajax request to an API : https://developer.riotgames.com/ But let's say that I just want to get the google page.
How on earth do I do that, is this even possible ? Here is a simple exemple :
$.ajax({ type: "GET", url: "https://google.com", dataType: "text", success: function(response){ alert("!!!"); }, error: function(error){ alert("..."); } }); I am getting the same error again and again :
XMLHttpRequest cannot load https://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access
The origin 'null' is because I run the code from : file:///D:/Projets/LoL/www/index.html and I read that the navigator is blocking, but it doesn't work as well if I disable the security with --disable-web-security And of course, I don't have access to the server I want to join.
492
Since the header is currently set to allow access only from https://yoursite.com , the browser will block access to the resource and you will see an error in your console. Now, to fix this, change the headers to this: res. setHeader("Access-Control-Allow-Origin", "*");
In order to fix CORS, you need to make sure that the API is sending proper headers (Access-Control-Allow-*). That's why it's not something you can fix in the UI, and that's why it only causes an issue in the browser and not via curl: because it's the browser that checks and eventually blocks the calls.
The CORS behavior, commonly termed as CORS error, is a mechanism to restrict users from accessing shared resources. This is not an error but a security measure to secure users or the website which you are accessing from a potential security bleach.
Or, your API fails and shows a CORS error in the console. This happens because the same-origin policy is part of the browser's security model which allows websites to request data from APIs of the same URL but blocks those of different URLs. Browsers do this by adding an ORIGIN key in the request.
You need the Cordova whitelist plugin: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/.
Have this in config.xml:
<access origin="*" /> <allow-navigation href="*"/> And have the Content-Security-Policy meta in index.html. Something like:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:"> If the Cordova Whitelist plugin doesn't work out for you, you can use the Cordova advanced Http plugin to make calls to external servers.
Install using: cordova plugin add cordova-plugin-advanced-http
Link to plugin: https://github.com/silkimen/cordova-plugin-advanced-http?ref=hackernoon.com
Extra info: https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
