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. 缺点:配置略微繁琐,请求资源必须加前缀。