CORS + Cordova：问题：Access-Control-Allow-Origin

Posted 2023-03-04

【中文标题】CORS + Cordova：问题：Access-Control-Allow-Origin

【英文标题】：CORS + Cordova : issues with : Access-Control-Allow-Origin

【发布时间】：2016-09-20 18:55:52

【问题描述】：

我已经在这个问题上搜索了几个小时，但我仍然找不到任何解决方案。

我正在开发一个 App cordova（基本上是 html / JS） 所以：应用程序从导航器在移动设备上运行，我无法向 API 发出 ajax 请求：https://developer.riotgames.com/ 但是假设我只想获取 google 页面。

我到底该怎么做，这甚至可能吗？ 这是一个简单的例子：

$.ajax(
    type: "GET",
    url: "https://google.com",
    dataType: "text",
    success: function(response)
        alert("!!!");
    ,
    error: function(error)
        alert("...");
    
);

我一次又一次地遇到同样的错误：

XMLHttpRequest 无法加载 https://google.com/。不 请求中存在“Access-Control-Allow-Origin”标头 资源。因此，Origin 'null' 不允许访问

起源 'null' 是因为我从 file:///D:/Projets/LoL/www/index.html 运行代码并且我读到导航器正在阻塞，但是如果我使用 --disable-web-security 禁用安全性，它就不能正常工作 当然，我无权访问我想加入的服务器。

【问题讨论】：

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin 的可能重复项。我建议对 JSONP 进行一些阅读，但一般来说，如果您无法修改服务器，那么就没有好方法来做您想做的事情。

【参考方案1】：

您需要 Cordova 白名单插件：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/。

在 config.xml 中有这个：

<access origin="*" />
<allow-navigation href="*"/>

并且在 index.html 中有 Content-Security-Policy 元数据。比如：

<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:">

【讨论】：

当我作为浏览器运行时，它对我不起作用。我仍然有：“跨域请求被阻止：同源策略不允许读取localhost:7788/testAction 的远程资源。这可以通过将资源移动到同一个域或启用 CORS 来解决。

如果您部署到手机上，您可能会得到更好的结果。我读到（不幸的是我不记得在哪里）从应用程序或浏览器运行时，CORS 响应略有不同。我创建了一个在我的元标记中启用了 CORS 的测试应用程序，它仅在我将其部署到我的手机时才有效 - 而不是从我的桌面。

向我抛出 500 条拒绝内容安全策略指令的错误

我不得不用这个网站上的信息来补充这个提示：content-security-policy.com... 现在一切正常。

将 添加到 config.xml 为我修复了它。将元标记添加到 index.html 给我带来了一些奇怪的错误

【参考方案2】：

如果 Cordova Whitelist 插件不适合您，您可以使用 Cordova 高级 Http 插件调用外部服务器。

安装使用： cordova 插件添加 cordova-plugin-advanced-http

插件链接： https://github.com/silkimen/cordova-plugin-advanced-http?ref=hackernoon.com

额外信息： https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664

【参考方案3】：

如果您刚从 2019 年 8 月 1 日开始遇到此问题。此Access-Control-Allow-Origin Error..(using cordova) 可能与该问题有关。

【参考方案4】：

我在 nodejs 服务器中添加了以下内容，解决了我的问题；

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();
);

如果您使用的是 nodejs，这可能会有所帮助。

谢谢

【参考方案5】：

我找到了类似情况的解决方案，但出现错误： "access-control-allow-origin 不能包含多个来源"

最终我发现，虽然我已将 .net 核心 API 设置为允许所有来源，如下所示：

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();
            );
...

然后，我在 API 网站根目录的 web.config 文件中留下了一个旧的 CORS 命令：

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

我注释掉了 customHeaders 部分，它起作用了。

任务完成！

【参考方案6】：

没有必要这样做

你只是尝试更改权限

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