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

后端提供的数据接口为：localhost:3000/web/news/list   
注：该例子是由本地node提供的接口，因为端口不同，也产生了跨域。
当然在服务端也可以通过安装cors插件配置跨域。

未配置前

WeChat8cf24d6c93d55a5e65bab2e20f78cd78.png

在当前文项目根路径新建一个文件，文件名固定为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)
      })
    }
  }

成功拿到数据

image.png

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