在vue项目中,一般我们会遇到跨域的问题,vue项目中解决跨域是非常简单的,我们只需要在项目包自带的服务器, 通过proxy 解决跨域,假设我们需要从虎牙直播或者bilibili直播中获取一些数据,如下代码:

<template>
  <div>
    <button @click="getData">请求数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getData() {
      // 地址放浏览器, 测试是否能访问: 
      // const url = 'https://m.douyu.com/api/room/list?page=1'
      const url = '/douyu/api/room/list?page=1'

      // 跨域报错:
      // 发送请求的服务器 和 请求接口所在的服务器 不是同一个
      // 解决方案1 CORS: 在接口服务器上添加 白名单, 允许其他来源的访问
      // 解决方案2 Proxy: 代理方案, 脚手架生成的这个项目包 支持快速配置代理服务器
      this.axios.get(url).then(res => {
        console.log(res)
      })

      // 由于 哔哩哔哩 服务器做了权限设置, 403报错, 无法用代理转换
      // var url2 = '/bili/x/web-interface/ranking/region?rid=24&day=7&context='
      // this.axios.get(url2).then(res => {
      //   console.log(res)
      // })
    },
  },
}
</script>

<style lang="scss" scoped></style>

在vue.config.js 文件中的代码如下 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置服务器,添加代理选项
  // devServer :开发 服务器
  devServer: {
    //proxy: 代理
    proxy: {
      // 必须重启服务器, 配置才能生效
      // 如果请求地址是 /douyu 开头的, 则被当前代理处理
      '/douyu': {
        // target: 由服务器帮助到此域名中请求数据 -- 代理
        target: 'https://m.douyu.com',
        changeOrigin: true, //代表 域名不同,需要启动代理模式
        // 路径重写: 真正发送的请求地址中, 要去掉 /douyu 开头
        pathRewrite: {
          // ^ :正则中的 字符串开头 的意思
          '^/douyu': '',
          // 如果不替换则发送的请求地址如下: 会多余一个 /douyu
          // https://m.douyu.com/douyu/api/room/list?page=1
        },
      },
      // 添加 哔哩哔哩的
      '/bili': {
        target: 'https://api.bilibili.com',
        changeOrigin: true,
        pathRewrite: {
          '^/bili': '',
        },
      },
    },
  },
})

// https://api.bilibili.com

此时会发现虎牙跨域拿取数据成功,但是bilibili失败,403错误,服务器做了权限设置, 403报错, 无法用代理转换,所以代理不是万能的

而且在配置文件修改后,需要重新启动服务器才可以生效,否则依旧会报错