27

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.

João Pimentel Ferreira
  • 14,289
  • 10
  • 80
  • 109
Navet
  • 301
  • 1
  • 3
  • 7
  • 1
    Possible duplicate of [XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin](http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin) . I'd suggest doing some reading on JSONP but in general if you can't modify the server, there's no good way to do what you want to do. – CollinD May 23 '16 at 19:10

6 Answers6

30

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:">
Niels Steenbeek
  • 4,692
  • 2
  • 41
  • 50
  • 12
    It doesn't work for me when I run as browser. I still have: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:7788/testAction. This can be fixed by moving the resource to the same domain or enabling CORS. – Emiter Apr 30 '17 at 13:23
  • If you deploy to a handset you may have better results. I read (unfortunately I cannot recall where) that the CORS responses are slightly different when run from app or browser. I created a test app with CORS enabled in my meta tags and it only worked when I deployed it to my phone - not from my desktop. – nmcilree Dec 13 '17 at 08:03
  • 1
    Throws me like 500 errors of Refused Content Security Policy directive – Raz Apr 26 '18 at 08:43
  • I had to complement this tips with the information found in this site: https://content-security-policy.com... and all is working now. – Nowdeen Dec 28 '18 at 22:13
  • 2
    Adding to config.xml fixed it for me. Adding the meta tag to index.html threw me some exotic error tho – kristofvdj88 Jun 05 '20 at 08:47
  • @kristofvdj88 maybe try an easy example first: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy – Niels Steenbeek Jun 05 '20 at 08:53
  • That is not secure at all. Even Cordova documentation recommends not to do that. – Rohit Singh Sep 14 '22 at 15:16
3

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

Baron Afutu
  • 41
  • 1
0

I have added following in nodejs server which solves my issue;

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

This may be helpful if you are using nodejs.

Thanks

Ariejan
  • 10,910
  • 6
  • 43
  • 40
Deepak Bhatta
  • 474
  • 4
  • 16
0

If you just experienced the issue starting Aug 1 2019. This Access-Control-Allow-Origin Error..(using cordova) might be related to the problem.

Rafael M.
  • 211
  • 2
  • 7
0

There is no need to do such thing

You just try to change the permission 

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
    ...
    android:usesCleartextTraffic="true"
    ...>
    ...
</application>

Logemann
  • 2,767
  • 33
  • 53
Rajaram Joshi
  • 21
0

I found the solution for my similar scenario, was getting the error: "access-control-allow-origin cannot contain more than one origin"

Eventually I found that although I had set my .net core API to allow all sources like so:

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();
...

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseCors(builder => builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
...

I had then left an old CORS command in the web.config file in the website root of the API:

     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="https://localhost:444" />
     </customHeaders>

I commented out the customHeaders section and it worked.

Mission accomplished!

ShanksPranks
  • 397
  • 3
  • 8