Vue学习笔记-配置代理服务器

前言-跨域问题

跨域问题指的是在 Web 应用程序中，由于同源策略的限制，导致浏览器无法发送跨域请求，也无法获取跨域响应的问题。同源策略是浏览器的一种安全策略，它要求 Web 应用程序只能访问与当前页面具有相同协议、主机名和端口号的资源。

如果不同源的 Web 应用程序需要通信，就需要进行跨域请求。但由于同源策略的限制，浏览器不允许跨域请求。在此情况下，如果前端需要访问其他域名下的资源，就会出现跨域问题。

为解决跨域问题，可以由前端（或者后端）来进行相应配置。这里来介绍前端Vue项目配置代理服务器来解决跨域问题的方法

Vue脚手架配置代理服务器

方法一

在vue.config.js中添加如下配置：

devServer:{
    //填写代理服务器需要代理的服务器IP地址(一般是后端服务器地址，精确到端口号)
    proxy:'http://localhost:4399'
 },
1
2
3
4

说明

• 优点：配置简单，请求时，直接发给前端（8080）即可
• 缺点：无法配置多个代理，无法灵活地控制请求是否走代理
• 工作方式：当请求了前端不存在的资源时，才会将请求转发给服务器（优先匹配前端资源）

方法二

在vue.config.js中添加如下配置：

//开启代理服务器，用于解决跨域问题(方法2)
  devServer:{
    proxy:{
      '/myPrefix':{/*当请求url包含此前缀时，会走代理服务器（注意：前缀跟在端口号后面）*/
        target:'http://localhost:4399', /*代理服务器需要代理的服务器IP地址*/
        pathRewrite:{'^/myPrefix':''}, /*路径重写，用于去掉前缀*/
        ws : true, /*用于支持websocket*/
        changeOrigin : true, /*用于控制请求头中的‘Host’值，为true则撒谎，对应的值为target中的值（对'关于请求的发起者是谁'这件事是否说谎）*/
      },
      /*
      changeOrigin 为true时，服务器收到的请求头Host值为localhost:4399
      changeOrigin 为false时，服务器收到的请求头Host值为localhost:8080（Vue前端服务器端口号）
      changeOrigin默认为true
      */
      '/demo':{
        target: 'http://localhost:4398',
        pathRewrite: {'^/demo':''},
        ws : true,
        changeOrigin: true
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

说明：

• 优点：可以匹配多个代理服务器，通过添加前缀的方式来控制是否需要走代理服务器
• 缺点：配置繁琐，请求时必须添加前缀