YDOOK: vue-cli4.5 vue3.0: element-UI el-upload 跨域问题2:Access to XMLHttpRequest 亲测可用!完全教程!

YDOOK: vue-cli4.5 vue3.0:跨域问题2:

Access to XMLHttpRequest at ‘http://localhost:8002/get_pic’ from origin ‘http://localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.


1. 问题出现原因:

由于 Http 协议的安全性设计性质,同一IP地址的不同端口之间,以及 不同IP地址的不同端口之间 不可以相互调用或传输数据。


2. 解决方法:

2_1. 在 vue-cli 4.5 项目的根目录下新建 js文件:./vue.config.js , 内容如下:

/* eslint-disable indent */
module.exports = {
    devServer: {
        port: 80,
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:8002', // 设置被替换代理的目的域名与端口
                secure: false, // 设置是否允许 https接口
                changeOrigin: true, // 设置是否允许接口跨域
                pathRewrite: {
                    '^/api': '' // 设置路径重写的代理名称,这里用代理名称代替target里面的 'http://localhost:8002' 地址
                }
            }
        }
    }

    // eslint-disable-next-line eol-last
}

2_2. 将根目录下新建 json文件:./package.json 中的配置项 vue 删除:

删除前:

YDOOK

3. 删除后:

YDOOK


3. 对应得 vue-cli4.5 中的 element-UI 的上传下载标签控制也要修改:

1. 修改前:

<div class="UpLoadPics">
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8002/get_pic"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 jpg/png 文件,且不超过 500kb
          </div>
        </template>
      </el-upload>

2. 修改后:

<div class="UpLoadPics">
      <el-upload
        class="upload-demo"
        drag
        action="/api/get_pic"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 jpg/png 文件,且不超过 500kb
          </div>
        </template>
      </el-upload>

即:使用了 proxy 代理,将 http://localhost:8002 代理成了 /api !


4. 重新启动: npm run serve :

YDOOK

1. 无错误!

2. 无警告!



YDOOK CSDN认证博客专家 算法 人工智能
欢迎访问个人网站: www.ydook.com
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页