如何在Capacitor/Cordova WebView中处理TinyMCE的Referer请求头？

以下是适配WebView环境的三种可行方案，按推荐优先级排序：

方案1：配置TinyMCE的referrer_policy参数 #

TinyMCE 6.x支持通过初始化参数指定Referer策略，针对WebView环境可设置宽松策略绕过验证限制：

import { Editor } from '@tinymce/tinymce-react';

function MyEditor() {
  return (
    <Editor
      apiKey="你的Tiny Cloud API密钥"
      init={{
        // 其他TinyMCE配置项
        referrer_policy: 'unsafe-url', // 允许发送WebView的源标识（如file://或capacitor://协议）
        // 也可尝试 'origin-when-cross-origin'
      }}
    />
  );
}

该参数会让TinyMCE发送符合策略的Referer头，使Cloud服务能识别WebView的源信息。

方案2：修改WebView配置强制添加Referer头 #

若方案1无效，可直接通过框架配置为WebView添加自定义HTTP头：

针对Capacitor（iOS） #

1. 在capacitor.config.ts中添加WebView自定义头配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'YourApp',
  webDir: 'build',
  ios: {
    webView: {
      additionalHttpHeaders: {
        'Referer': 'https://your-registered-domain.com' // 填写你在Tiny Cloud后台注册的域名
      }
    }
  }
};

export default config;

2. 重新同步iOS项目：npx cap sync ios

针对Cordova（iOS） #

修改config.xml中的iOS平台配置，添加WKWebView自定义头：

<platform name="ios">
  <preference name="WKWebViewCustomHeaders" value='{"Referer": "https://your-registered-domain.com"}' />
  <!-- 其他iOS配置项 -->
</platform>

注意：填写的域名需已在Tiny Cloud后台完成验证。

方案3：改用自托管TinyMCE（彻底避开云验证） #

若云服务验证限制难以绕过，可直接自托管TinyMCE，脱离Cloud服务依赖：

1. 下载TinyMCE 6.3.1安装包，解压后将tinymce文件夹放到React项目的public目录下。
2. 在public/index.html中引入本地脚本：

<script src="%PUBLIC_URL%/tinymce/tinymce.min.js"></script>

3. 初始化编辑器时无需apiKey，直接配置本地资源路径：

<Editor
  init={{
    // 你的编辑器配置项
    skin_url: '/tinymce/skins/ui/oxide',
    content_css: '/tinymce/skins/content/default/content.css'
  }}
/>

这种方式完全避开Tiny Cloud的域名验证，适配WebView这类无传统域名的环境。

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