Vue：（三十二）脚手架配置代理

最新推荐文章于 2023-09-04 18:25:13 发布

置顶空谷有来人

最新推荐文章于 2023-09-04 18:25:13 发布

阅读量286

点赞数

分类专栏： Vue 前端文章标签：前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_41377877/article/details/129169041

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

在工作中，我们在浏览器请求的时候，经常会遇见跨域CROS的问题，解决办法有多种，可以通过nginx配置实现，也可以通过前端技术实现，今天我们就学习一下通过前端配置代理的方式解决跨域问题。

方法一

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

devServer:{
    proxy:"http://localhost:9000"
}

说明：

优点：配置简单，请求资源时直接发给前端（8080）即可

缺点：不能配置多个代理，不能灵活的控制请求是否走代理

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么请求会转发给服务器（有限匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

devServer: {
    proxy: {
      api: {
        target: 'https://www.baidu.com',
        pathRewrite: { '^/api': '' },
          changeOrigin: true
      },
            ap2: {
        target: 'https://www.baidu.com',
        pathRewrite: { '^/ap2': '' },
          changeOrigin: true
      },
    },
  },

说明：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理

缺点：配置略微繁琐，请求资源时必须加前缀

上述是讲解了通过两种配置实现跨域的方案，下面我通过代码来实现第二种方案，来解决请求百度网站的跨域问题。

App.vue

<template>
  <div>
    <button @click="getBaidu">百度一下</button>
  </div>
</template>

<script>
  //引入组件
  import axios from 'axios'

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

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      api: {
        target: 'https://www.baidu.com',
        pathRewrite: { '^/api': '' },
      },
    },
  },
})

代码中用到的是axios方法发送请求，这个第三方库安装也很简单，只需要在终端执行 npm i axios，就能完成安装。

今天的配置代理就学到这里了

我是空谷有来人，谢谢支持。