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

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.
複製代碼

如何經過cdn引入'UEditor'github.com/HaoChuan942…

---

修改以前

<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/

<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中配置代理,即可以解決這個跨域問題