ng-include在iOS端无法正常工作 求技术协助

嘿，这个问题我太熟悉了！你遇到的是iOS WebView的安全策略限制——Android对file://协议下的跨域请求比较宽松，但iOS默认会阻止这类请求，所以才会弹出"Cross origin requests are only supported for HTTP"的报错。下面给你几个靠谱的解决方案：

方案1：配置Cordova项目的iOS权限（最直接） #

如果你是用Cordova/PhoneGap开发的，直接修改项目根目录下的config.xml，添加iOS平台的权限配置：

<platform name="ios">
    <!-- 允许WebView导航到本地文件路径 -->
    <allow-navigation href="file:///*" />
    <!-- 允许从file URL加载其他file资源 -->
    <preference name="AllowFileAccessFromFileURLs" value="true" />
    <!-- 允许file URL拥有全局访问权限 -->
    <preference name="AllowUniversalAccessFromFileURLs" value="true" />
</platform>

添加完之后，记得清理iOS的构建缓存，然后重新编译项目，这个配置就能生效了。

方案2：用AngularJS的$templateCache预加载模板 #

如果不想改项目配置，或者配置不生效，你可以把模板内容直接内嵌到JS代码里，让Angular从缓存里取模板，彻底避免XHR请求：

// 替换成你的Angular模块名
angular.module('yourAppModule').run(function($templateCache) {
  // 把Menu.html的内容直接写在这里
  $templateCache.put('templates/Menu.html', `
    <div class="menu-container">
      <!-- 这里是Menu.html的所有原始内容 -->
      <h1>菜单</h1>
      <ul>
        <li>选项1</li>
        <li>选项2</li>
      </ul>
    </div>
  `);
});

这样Angular在需要加载templates/Menu.html时，会直接从缓存里读取，不会发起跨域的XHR请求，自然就不会报错了。

方案3：配置WKWebView的偏好设置（原生/插件方式） #

如果你的项目用的是WKWebView（现在Cordova默认推荐用这个，UIWebView已经被废弃），可以通过原生代码或者插件修改其安全偏好：

原生iOS代码方式（Swift） #

在初始化WKWebView时，添加权限配置：

import WebKit

// 初始化WebView配置
let webConfig = WKWebViewConfiguration()
webConfig.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
webConfig.setValue(true, forKey: "allowUniversalAccessFromFileURLs")

// 创建WKWebView
let webView = WKWebView(frame: view.bounds, configuration: webConfig)
view.addSubview(webView)

Cordova插件方式 #

如果用Cordova的cordova-plugin-wkwebview-engine插件，除了在config.xml里添加方案1的配置，还可以额外添加：

<preference name="WKWebViewOnly" value="true" />

注意事项 #

• 如果你之前用的是UIWebView，建议尽快迁移到WKWebView，苹果已经不再支持UIWebView的更新了。
• 每次修改config.xml后，最好删除iOS平台重新添加（cordova platform remove ios && cordova platform add ios），确保配置完全生效。

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