Vue JS+Cordova应用打开LINE邀请链接遇net::ERR_UNKNOWN_URL_SCHEME错误

问题场景 #

用Monaca开发Vue+Cordova应用，通过InAppBrowser打开LINE邀请链接，提交表单后跳转至「打开LINE/下载LINE」页面，点击「打开LINE」时触发net::ERR_UNKNOWN_URL_SCHEME错误，已尝试添加allow-intent和intent-filter配置但无效。

解决方案 #

核心原因是InAppBrowser的WebView无法直接解析intent://协议，必须通过Cordova原生API拦截并处理跳转：

1. 拦截InAppBrowser的URL加载事件 #

在打开邀请链接的代码中，监听loadstart事件，捕获intent://开头的URL，转由Cordova原生方法处理：

// Vue组件中打开链接的示例代码
openLineInvite() {
  const inviteUrl = '你的LINE邀请链接地址';
  // 打开InAppBrowser
  const browser = cordova.InAppBrowser.open(inviteUrl, '_blank', 'location=yes');

  // 监听页面加载开始事件
  browser.addEventListener('loadstart', (event) => {
    if (event.url.startsWith('intent://')) {
      // 阻止WebView加载无效的intent URL
      browser.stopLoad();
      // 调用Cordova原生方法打开intent链接
      navigator.app.loadUrl(event.url, { openExternal: true });
    }
  });
}

2. 修正config.xml配置 #

删除之前错误的intent-filter配置，保留正确的权限设置：

<platform name="android">
  <!-- 允许intent和line协议的跳转 -->
  <allow-intent href="intent://*/*" />
  <allow-intent href="line://*/*" />
  <!-- 允许访问所有域名（根据需求可缩小范围） -->
  <access origin="*" />
  <!-- 确保InAppBrowser功能启用 -->
  <feature name="InAppBrowser">
    <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
  </feature>
</platform>

3. 确认依赖插件 #

确保Monaca项目已安装cordova-plugin-inappbrowser，可通过Monaca IDE的「Package Manager」搜索并安装。

原理说明 #

之前的配置无效是因为：

• InAppBrowser的WebView属于应用内的网页容器，不支持直接处理intent://这类原生协议
• 错误添加的intent-filter是用于让其他应用打开当前应用，而非让当前应用打开LINE应用

通过拦截URL并调用navigator.app.loadUrl，可以让Cordova原生层处理intent跳转，唤起LINE应用。

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