2022/05/27: VUE配置代理

2022-05-27 00:32:02 阅读：156 来源： 互联网

标签：27 console 请求 05 VUE axios error response log

通常VUE在进行跨域网络请求的时候需要用到配置代理

请求的url中的“协议”、“域名”、“端口号”其中任何一种不一样都是属于跨域
解决跨域的主要四种方法——jsonp、跨域资源共享CORS(Cross-Origin Resource Sharing)、proxy代理、webpack中间件

没有配置代理直接进行网络请求

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

<script>
import axios from 'axios'

export default {
  name: 'App',
  components: {  },
  methods:{
    getStudents() {
      axios.get("http://localhost:5000/students").then(
        response => {
          console.log('请求成功了', response.data)
        },
        error => {
          console.log('请求失败了', error.message)
        }
      )
    }
  }
}
</script>

<style>
</style>

结果：请求失败

这里主要讲用VUE脚手架代理的方式来解决跨域问题

方式一

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

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

然后修改网络请求的端口号

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

修改了vue的配置后需要重新运行后才会生效，VUE首先会在前端请求资源，如果前端无该资源，会将请求转发给服务器(有限匹配前端资源)。

这种方式的优缺点

优点：配置简单，请求资源直接发给前端的端口号(8080)，通过代理服务器请求(5000)
缺点：不能配置多个代理，所有的请求最后都会走同一个代理(5000)，并且不能灵活的控制请求是否走代理

方式二

在vue.config.js中添加具体的配置

module.exports = defineConfig({
  devServer:{
    proxy: {
      '/jiangwang': {
        target: 'http://localhost:5000',
        pathRewrite:{'^/jiangwang':''}, // 将/jiangwang替换为空
        ws:true,	// 开启webSocket
        changeOrigin:true	// false的时候后端用 request.getHeader("Host") 打印host是8080端口，开启后获取的host是5000端口
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite:{'^/demo':''},
        ws:true,
        changeOrigin:true
      }
    }
  }
})

在VUE中修改请求

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  components: {  },
  methods:{
    getStudents() {
      axios.get("http://localhost:8080/jiangwang/students").then(
        response => {
          console.log('请求成功了', response.data)
        },
        error => {
          console.log('请求失败了', error.message)
        }
      )
    },
    getCars() {
      axios.get("http://localhost:8080/demo/cars").then(
        response => {
          console.log('请求成功了', response.data)
        },
        error => {
          console.log('请求失败了', error.message)
        }
      )
    }
  }
}
</script>

<style>
</style>

请求结果：

方式二说明

通过去对请求地址进行匹配，对匹配成功进行对于的代理，并且i需改原始请求
优点：可以配置多个代理，并且可以灵活的控制请求是否走代理
缺点：配置较为繁琐，在对应的请求需要加上前缀

标签：27,console,请求,05,VUE,axios,error,response,log
来源： https://www.cnblogs.com/jiangblog/p/16315995.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2022/05/27: VUE配置代理

方式一

方式二