vue项目中vue.config.js怎么配置跨域

调用后端接口访问后台数据，但是因为请求url的协议、域名、端口三者之间任意一个与当前页面url不同产生了跨域，而且后端也没有配置允许跨域（后端如果配置跨域通常是cors），所以前端就要配

在当前文项目根路径新建一个文件，文件名固定为vue.config.js

module.exports = {
    // pabulicPath:process.env.NODE_ENV === 'production' ? '' : '',
    devServer:{
        host:'0.0.0.0',
        port:'8080',
        // https:false,
        open:true,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy:{ //配置跨域
            '/api':{
                target:'http://localhost:3000/web',
                ws:true,
                changeOrigin:true,//允许跨域
                pathRewrite:{
                    '^/api':''   //请求的时候使用这个api就可以
                }
            }
        }
    }
}

调用跨域接口

methods: {
    getData(){
      var param = {
        params:{
          devid:'8479593759372',
          user:'akdi',
          key:'8aad46f68c77e83ee2bcc3d9f9ec818a'
        }
      }
      this.$http.get('/api/news/list',param).then(res=>{
        console.log(res)
      })
    }
  }

成功拿到数据

注意    修改 之后需要重新启动项目   

如果配置了 axios 的baseurl  需要关掉  不然执行的还是  baseURL的 基础地址

const http = axios.create({
    // baseURL:'http://localhost:3000/web/api',
})