vue 反向代理及axios的配置

开发模式下跨域解决方案与代理服务配置

1、需求
　　前后端分离项目中，需要使用反向代理，已解决跨域访问问题，在这里需要了解正向代理、反向代理等概念，

2、正向代理

正向代理比较好理解，类似于一个跳板，用来代替客户访问外部资源。

例如：
A向C借钱，由于一些情况不能直接向C借钱，于是A想了一个办法，他让B去向C借钱，这样B就代替A向C借钱，A就得到了C的钱，C并不知道A的存在，B就充当了A的代理人的角色。

总的来说：

• 正向代理（forward proxy） ，一个位于客户端和原始服务器之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并制定目标（原始服务器），然后代理向原始服务器转发请求并将获得的内容返回给客户端，客户端才能使用正向代理。

3、反向代理

• 反向代理（Reverse Proxy），以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求的客户端，此时代理服务器对外表现为一个反向代理服务器。
• 理解起来有些抽象，可以这么说：A向B借钱，B没有拿自己的钱，而是悄悄地向C借钱，拿到钱之后再交给A,A以为是B的钱，他并不知道C的存在。

注意：脚手架 4 不能配置反向代理，需要降级处理
如果后端没有做跨域的请求，则前台做代理。
跨域代理，开发模式下前端来处理，线上由后端处理
原理： 由 8080 端口的服务器去帮助请求 3000 端口服务器 再有 8080 返回给前端浏览器

方法:

 //vue.config.js
module.exports = {
   
   
  // lintOnSave: process.env.NODE_ENV !== 'production',
  devServer: {
   
   
    proxy: {
   
   
      '/api': {
   
    // 就是使用/api代替了下边要写的后端的接口
        // 你的真实的api地址,即真实接口地址
        target: 'http://localhost:3001',
        // 代理websocket
        // ws: true,