vue-ueditor-wrap ... "https://xxx" from accessing a cross-origin frame.

887 阅读1分钟

vue-ueditor-wrap 改为cdn加载UEditor源码,资源可以加载,但打开dialog会出现iframe跨域

Uncaught DOMException: Blocked a frame with origin "http://10.0.2.111:8080" 
from accessing a cross-origin frame.

image.png

如何通过cdn引入'UEditor'github.com/HaoChuan942…

image.png


修改之前

image.png

<template>
    <div>
        <vue-ueditor-wrap
                v-model="msg"
                :config="ueditorConfig"
        ></vue-ueditor-wrap>
    </div>
</template>

<script>
  /**
   * When I wrote this code,Only God and I understood what I was doing.
   * Now,God only knows  !!!
   */
  import VueUeditorWrap from 'vue-ueditor-wrap';
  export default {
    name: "bb",
    components: {VueUeditorWrap},
    data(){
      return{
        msg:'+++',
        ueditorConfig:{
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 200,
          // 初始容器宽度
          // initialFrameWidth: '100%',
          // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
          serverUrl: `http://localhost:9023/lw-ueditor-backend-server/ueditor/oss/upload`,
          // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
          UEDITOR_HOME_URL: `http://10.0.2.111:8080/UEditor/`,
          // 是否保持toolbar的位置不动,默认true
          autoFloatEnabled: false
        },
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

修改之后: 将 UEDITOR_HOME_URL: http://10.0.2.111:8080/UEditor/ 替换为 UEDITOR_HOME_URL: /UEditor/

image.png

<template>
    <div>
        <vue-ueditor-wrap
                v-model="msg"
                :config="ueditorConfig"
        ></vue-ueditor-wrap>
    </div>
</template>

<script>
  /**
   * When I wrote this code,Only God and I understood what I was doing.
   * Now,God only knows  !!!
   */
  import VueUeditorWrap from 'vue-ueditor-wrap';
  export default {
    name: "bb",
    components: {VueUeditorWrap},
    data(){
      return{
        msg:'+++',
        ueditorConfig:{
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 200,
          // 初始容器宽度
          // initialFrameWidth: '100%',
          // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
          serverUrl: `http://localhost:9023/lw-ueditor-backend-server/ueditor/oss/upload`,
          // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
          UEDITOR_HOME_URL: `/UEditor/`,
          // 是否保持toolbar的位置不动,默认true
          autoFloatEnabled: false
        },
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

增加代理

proxyList: {
  "/UEditor": {
    target: "http://10.0.2.111:8080",
    changeOrigin: true,
    pathRewrite: {
      "^/UEditor": "/UEditor",
    },
    headers: {
      referer: "http://10.0.2.111:8080",
    },
  },
},

在vue中配置代理,便可以解决这个跨域问题