使用@wangeditor/editor-for-react实现 React项目跨域跨端口跟Vue项目共享token

vue项目中：
axios.defaults.withCredentials
withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。

默认值为false。
true：在跨域请求时，会携带用户凭证
false：在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie
当配置了 withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*

如果后端需要带cookie过去，前端需要设置为true

Vue中的代码

const http = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 1000 * 180,
  withCredentials: true,
})

React中的代码

   let editorConfig = {
    // placeholder: props?.readyOnly ? '' : '请输入内容...',
    MENU_CONF: {},
    readOnly: true,
    autoFocus: false,
  };
editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的配置
    // server: `${API.uploadNoticeFile}`,
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'file',
    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 1 * 1024 * 1024, // 1M
    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 10,
    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/*'],
    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    meta: {
      // token: 'xxx',
      pathIndex: 1 
    },

    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,

    // 自定义增加 http  header
    // headers: {
    //   Accept: 'application/json',
    //   Authorization: `Bearer ${accessToken}`,
    //   'X-SAAS-Tenant-ID': tenantId,
    //   'X-SAAS-DEBUG': true,
    //   'X-SAAS-User-ID': useId,
    // },

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒
    // 上传之前触发

    onBeforeUpload(file) {
      // editor.initSelection()

      // TS 语法
      // onBeforeUpload(file) {    // JS 语法
      // file 选中的文件，格式如 { key: file }
      console.log('file', file);
      return file;
      // editorRef.current.editor.cmd.do('insertHtml', `<img src="${imageUrl}" alt=""/>`);
      // 可以 return
      // 1. return file 或者 new 一个 file ，接下来将上传
      // 2. return false ，不上传这个 file
    },

    // 上传进度的回调函数
    onProgress(progress:any) {
      // TS 语法
      // onProgress(progress) {       // JS 语法
      // progress 是 0-100 的数字
      console.log('progress', progress);
    },
    // 自定义插入图片
    customInsert(res:any, insertFn:any) {
      console.log('insertFn', res, insertFn);
      // TS 语法
      // customInsert(res, insertFn) {                  // JS 语法
      // res 即服务端的返回结果
      if ('00000' == res.code) {
        let { url, filename } = res.data;
        // 从 res 中找到 url alt href ，然后插入图片
        // insertFn(url);
        insertFn(url, filename, url);
      }
    },
  };

=================html==============
<Editor
         
          ref={editor}
          defaultConfig={editorConfig}
          value={html}
         
          onChange={(editor) => {
            setHtml(editor.getHtml());
            props.setEditorFun(editor.getHtml());
          }}
          mode="default"
        // style={{ height: height }}
        />

备注：

其他常用API参考官方网站：

wangEditor