vuecli3 爬坑之旅

vuecli3 爬坑之旅

  vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。

解决方法如下：
在项目package.json文件同级下添加vue.config.js文件，vue.config.js文件内容举个例子具体如下，

module.exports = {
    baseUrl : '/synga',//打包后的路径前缀
    devServer: {
        proxy: {
            '/api': {
                target: 'https://api.douban.com/v2',//豆瓣api v2接口
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

配置好后需要重启node服务，此时我们再去请求其它域的地址就能获得数据，例如我们现在去请求豆瓣api数据就能访问到。

this.$http.get('/api/movie/in_theaters',{
              params:{
                  start: 0,
                  count: 25
              }
          }).then(res => {
            //   console.log(res);
          }).catch( err =>{
                console.log(err);
          });

在打包后，我们的网络请求会请求错误，因为打包后的文件没有了我们配置的跨域服务，我们需要提前将“/api”设置为一个变量，打包前将这个变量设置为正确的路径，如下:

let serverUrl = '/api/'  //本地调试时
// let serverUrl = 'https://api.douban.com/v2'  //打包部署上线时
export default {
  dataUrl: serverUrl + 'bj11x5.json'
}
``