Vue配置代理学习笔记

Vue脚手架配置代理学习笔记

因为当一个项目变大时,把所有的内容都丢在一个网站或者是后台服务器中是不现实的，因此有跨域。跨域请求,首先浏览器为了安全，做了一个同源策略机制，也就是所谓的同源安全策略。

浏览器的同源策略（Same-Origin Policy）是一种安全机制，用于限制一个网页文档或脚本如何与来自不同源的资源进行交互。同源是指两个 URL 的协议、主机和端口号都相同。

协议相同+域名相同+端口号相同，浏览器才认为是同一个网站，才不会受到同源策略的影响，才可以正常的发送ajax请求。


学习背景

node编写的服务器

server1.js是node.js编写的服务器。node server1 运行此服务器，server1是开的5000端口，访问地址时候可以看到一些学生数据。浏览器输入地址发送的是get请求。

axios发送Ajax请求b

常用发送Ajax请求的方式

  1. xhr new XMLHttpRequest() xhr.open() xhr.send()
  2. JQuery $.get $.post
  3. axios
  4. fetch

使用axios发送请求

下载引入axios

npm  i axios

import axios from 'axios'

App入口文件发送请求的核心语句

<button @click="getStudents">获取学生信息</button>

methods: {
    getStudents() {
      axios.get('http://localhost:8080').then(
        response => {
          console.log('请求成功',response.data)
        },
        error => {
          console.log('请求失败',error.message)
        }
      )
  }
}

运行之后报错，CORS ,Access-Control-Allow-Origin跨域了，协议http，主机名localhost，端口号是8080。向server1（http，localhost，5000）发送请求，server1收到请求并且将数据交给浏览器，浏览器发现了跨域，所以没有返回给8080。

解决跨域的方法
CORS真正解决跨域问题
jsonp script src前后端协调只能解决get请求的跨域问题
配置代理服务器（常用）

方式一

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

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

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'
  }
}

代理服务器转发给谁就写谁的端口号，重新启动开启代理服务器。
如果请求的资源本机存在，那么就不会请求serve1服务器。


说明：

  1. 优点：配置简单，请求资源时直接发给前端8080即可
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式:按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方式二

 devServer: {
    proxy: {
      '/test': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/test': '' },
        ws: true,//用于支持websocket
        changeOrigin: false   //用于控制请求头中的host值
      }
    }
  },

/test就是匹配所有以/test开头的请求路径，target是代理目标的基础路径

changeOrigin设置为true时，服务器收到的请求头的host为localhost：5000，false对应服务器收到的请求头host是8080
默认值为true

axios应该修改请求的地址

axios.get('http://localhost:8080/test/students')

5000服务器下没有test路径下的students，所以使用pathReWrite。

说明

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源必须加前缀。