vue跨域配置

最新推荐文章于 2024-08-11 16:27:47 发布

谷雨2004

最新推荐文章于 2024-08-11 16:27:47 发布

阅读量853

点赞数 1

分类专栏：前端笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40552644/article/details/123215667

版权

前端笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue CLI项目中通过`devServer.proxy`配置代理规则，实现对Douyu API的跨域访问，便于开发过程中获取直播数据。重点讲解了`target`、`changeOrigin`和`pathRewrite`的使用方法。

摘要由CSDN通过智能技术生成

在vue.config.js中配置服务器

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