vue中解决跨域问题(cli2/cli3创建项目)

500 阅读1分钟

使用http-proxy-middleware 代理解决

cli2创建-打开config中的index.js文件

在proxyTable中添写如下代码

proxyTable: { 
  '/api': { 
    target: '填写请求源地址', //源地址 
    secure: true,  // 如果是https接口,需要配置这个参数
    changeOrigin: true, //是否跨域
    pathRewrite: { 
      '^/api': '' //路径重写 
      } 
  } 
}

在使用接口前加上代理的api

 this.$axios.post("/api/地址",{
     发送的数据
    }).then(data=>{
      console.log(data);
    })

cli3创建-在根目录创建一个vue-config.js

添加下面代码

module.exports = {
    devServer: {
        proxy: {
            '/search': {    // search为转发路径
                target: 'http://www.acfun.cn',  // 目标地址
                secure: true,  // 如果是https接口,需要配置这个参数
                ws: true, // 是否代理websockets
                changeOrigin: true   // 设置同源  默认false,是否需要改变原始主机头为目标URL,               
            }
        }
    }
};

使用时 直接/search/地址

this.$axios.post("/search/地址",{
     发送的数据
    }).then(data=>{
      console.log(data);
    })