Vue 中的代理服务器

Vue 中的代理服务器

这里面的配置，我一直是模棱两口，所以我写一篇博客做下笔记

历史

jQuery、axios 基于 xhr 的基础上发的请求；fetch 与 xhr 是平级的一个东西，虽然它是原生的，而且返回值也是 Promise 风格，但是它对 IE 的兼容器不好，所以现在比较流行的还是 axios

axios（已验证）

• 情况一，此时会以你的服务器 URL 作为 baseURL

  axios.get('/students').then(value => {
    console.log(value);
  })
  

• 情况二，此时以里面写的为准

  axios.get('http://localhost:5001/cars').then(value => {
    console.log(value);
  })
  

代理服务器

• 写法一

  devServer: {
    proxy: 'http://localhost:5000'  //将服务器默认的 协议+ip+端口 换成这个，但是网络请求中不变
  }
  

  • 若是以上第一种情况的话（我就认为端口是 8080 了），那么在网络请求中看到的是如下，并且它的状态码还是 200

    http://localhost:8080/students
    

    所以在网络请求中是看不出任何倪端的

  • 若是以上第二种情况的话，网络请求也依旧不变，所以网络请求是无论如何都不会变的。

    无法解决，你要跨域，你就不要用第二种写法。

    在 axios 中千万不要加上 协议 和 ip 地址，你用上服务器自己的就好了

    http://localhost:5001/cars
    

• 写法二

  • 情况一，将 '/students' 开头的，代理为 xxx。网络请求中的 URL 永远不变，但这次的状态是 304
    这玩意，只要没有重写那个配置项的话，就不会重写，不会覆盖 '/students'

  devServer: {
    proxy: {
      '/students': {
        target: 'http://localhost:5000'
      }
    }
  }