vue3.0/vueCli4跨域问题完美获取到豆瓣数据2020

接口代理

是通过修改前端服务器配置来实现的，这种方法的特点就是我们只需要修改前端，后端不需要修改。
比如说，我们现在请求的是别人的服务器的数据，那么，我们不可能去修改别人的服务器吧，因此，这时候，我们就可以考虑这种方法了。

vue跨域问题

举例子，当我们使用axios去调用豆瓣电影的数据的时候，会出现如下的场景

原因是因为浏览器是遵守同源规则的，目的服务器设置了保护机制，当终端发送请求的时候，目的地服务器会判断是来源服务器地址是不是跟它来自相同的网络地址，判断它是否与自己由亲戚关系，如果不同则禁止访问。

解决的方法可以配置接口代理，使用代理来美化我们vue本地服务器地址，将其伪装成为目标服务器地址一样

图解操作步骤

1.新建vue.config.js文件

vue.config.js是总个webpack的配置表，它会把里面的配置传送给node服务器，在vue根目录下新建一个vue.config.js文件，当我们服务启动的时候，这个配置表会注册到webpack里面去的。webpack里面有node.js的中间件，因此会被注册到里面去，从而启动我们node.js里面的服务。

因为node遵循的是COMMONJS规范，这时，我们使用module.exports方法

module.exports = {
	  devServer:{                //记住，别写错了devServer
	    host:'localhost',        //设置本地服务器   选填
	    port:8080,				//设置本地默认端口  选填
	    proxy:{                 //设置代理，必须填
	      '/api':{              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
	        target:'http://t.yushu.im',     //代理的目标地址，这是豆瓣接口地址网址
	        changeOrigin:true,              //是否设置同源，输入是的
	        pathRewrite:{                   //路径重写
	          '/api':''                     //选择忽略拦截器里面的单词
	        }
	      }
	    }
	  }
}

注意：代理原理
我们想要访问的目标接口地址是 http://t.yushu.im/v2/movie/in_theaters
现在，我们把这串地址的 http://t.yushu.im 这部分用拦截器 /api 替代，也就是说，当服务器启动的时候，在文件中读取到 ‘ /api ’ 这串字符串的时候，会变成 http:localhost/8080/api/v2/movie/in_theaters，而此时路径重写设置为忽略拦截器的名字，也就是说不包含拦截器的名字，因此，访问路径会变成这样，是这样 http:localhost/8080/v2/movie/in_theaters，最后，路径就成功伪装成与豆瓣网的亲戚啦，顺利闯过了浏览器的关卡啦，就可以正常获取到数据啦。

2.拼接接口地址，调用远程数据

在组件中使用axios调用远程接口，注意，使用‘/api’代替目标主地址(如果不会使用axios,可以参考我的另一篇有关axios的博客即可)

  created(){
	  // 使用  /api  代替  http://t.yushu.im
	  this.$axios.get('/api/v2/movie/in_theaters').then(res=>{
		  console.log(res);
	  })
  }

效果图