在 vue.config.js 项目中配置 proxy 解决跨域问题

最新推荐文章于 2024-08-05 14:28:25 发布

qq_40731473

最新推荐文章于 2024-08-05 14:28:25 发布

阅读量1.5k

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40731473/article/details/121660614

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js开发环境下，通过vue.config.js配置文件设置代理解决跨域问题的方法。通过设置devServer.proxy，将'/api'路径的请求转发到指定的后端服务器地址，从而在本地开发时避免浏览器的同源策略限制，实现数据的正常获取。

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

首先我们在本地开发，域名都是 localhost ，当我们需要请求后台数据时，就会出现跨域的问题。

下面就是在 vue.config.js 配置文件里：

devServer: {
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/api': {
        target: `http://10.24.4.214:8098/api`,
        changeOrigin: true,
        pathRewrite: {
          '^/api' : ''
        }
      }
    }
}

/api 表示需要去匹配请求时的 url，然后替换成 target 的值：

比如你页面里是写的