Cordova iOS加载远程JS文件遇跨域错误求助（v11.1.0）

问题分析 #

你遇到的是跨域资源共享（CORS）限制问题：最初请求origin为null，添加scheme和hostname配置后变为app://localhost，但服务器的Access-Control-Allow-Origin响应头未允许这个origin，导致请求被浏览器拦截。

解决方案 #

1. 配置Web服务器允许指定Origin #

修改Web服务器的响应头，添加允许app://localhost的规则：

• 若使用Nginx，在配置中添加：

  add_header Access-Control-Allow-Origin "app://localhost";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type";
  

• 若使用Apache，在.htaccess中添加：

  Header set Access-Control-Allow-Origin "app://localhost"
  Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type"
  

• 开发环境可临时允许所有origin（生产环境不推荐）：

  Access-Control-Allow-Origin: *
  

2. 确认Cordova白名单配置 #

确保config.xml中的白名单配置完整：

<access origin="*" />
<allow-navigation href="*" />
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

• <allow-navigation>允许应用内WebView导航到任意URL，部分场景下可绕过CORS检查。

3. 使用原生HTTP插件绕过浏览器CORS限制 #

如果无法修改服务器配置，可使用cordova-plugin-advanced-http插件，它直接通过原生API发起请求，不受浏览器CORS规则限制：

1. 安装插件：

   cordova plugin add cordova-plugin-advanced-http
   

2. 用插件加载JS文件：

   cordova.plugin.http.get('https://your-server.com/contacts.js', {}, {}, function(response) {
       // 执行加载的JS代码
       eval(response.data);
   }, function(error) {
       console.error('加载失败:', error);
   });
   

4. 清理并重建Cordova项目 #

配置修改后执行以下命令确保生效：

cordova clean
cordova build [android/ios]

内容的提问来源于stack exchange，提问作者Woodpecker