Vue-cli配置跨域请求

黛玉葬花也葬你

于 2021-03-11 20:41:23 发布

阅读量138

点赞数

分类专栏：跨域问题文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_48802343/article/details/114679531

版权

跨域问题专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue项目中解决跨域问题，通过在vue.config.js文件中设置代理，实现前端服务地址与接口服务地址间的跨域请求。具体包括代理配置、目标地址、路径重写等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因：
当前端项目运行的服务地址和接口服务运行的地址协议域名端口三者有一个不一致就会出现跨域
可在vue.config.js中设置一下东西：

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // http://localhost:8888/api/login ->  http://www.baidu.com/api/login
        // 接口域名发生变化 其余地址保持不变
        //一般都是/api这里不是死的可以更换
        '/api': {
            target: 'www.baidu.com', // 我们要代理的真实接口地址
            changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
            // 路径重写
            // 如果我们不光要使得域名修改,而且还需要改变其它路径,则需要做路径重写
            // 比如 我们想把api去掉  localhost:8888/api/login -> www.baidu.com/login
            pathRewrite: {
               '^/api': ''
            }
      }
    }
  }
}