Vue-cli如何配置跨域代理

最新推荐文章于 2023-06-02 11:26:16 发布

Gik99

最新推荐文章于 2023-06-02 11:26:16 发布

阅读量300

点赞数

分类专栏：前端常见问题解疑文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Gik99/article/details/129617056

版权

前端常见问题解疑专栏收录该内容

30 篇文章 2 订阅

订阅专栏

在Vue-cli开发环境中，为了解决API请求的跨域问题，可以使用webpack的反向代理功能。通过在vue.config.js中配置devServer的proxy选项，将/api路径的请求代理到指定的目标服务器（如www.baidu.com），同时设置changeOrigin为true以支持跨域。利用pathRewrite可以对请求路径进行重写，实现不同地址间的接口调用。

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

Vue-cli配置跨域代理

开发环境的跨域,就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题

vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题

这就是webpack的反向代理

在这里插入图片描述

在vue.config.js中配置

module.exports = {
  devServer: {
    // 省略前面的代码
      
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
            // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
            '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
        }
      },
    }
  }
}