vue3-cli: 使用代理，并设置cookie

最新推荐文章于 2024-08-06 13:51:12 发布

runing_an_min

最新推荐文章于 2024-08-06 13:51:12 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/u014686399/article/details/115223049

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了在前端Vue.js和后端SpringBoot项目中进行联调时，如何通过配置vue.config.js中的代理解决跨域问题。在开发阶段，通过设置devServer的proxy属性，将Vue的请求代理到SpringBoot的API接口，确保前端能够正常访问后端资源，同时在代理请求中添加了设置cookie的示例。

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

场景描述

前端项目使用vue+ts开发，后端项目是spring boot 。在前后端都开发完成以后，自然就进入联调阶段了。
一般会采用下面的架构：
在这里插入图片描述
上面额架构可以避免跨域问题

配置

# vue.config.js
  devServer: {
    port: 3000, // 端口
    proxy:{
      "/rest":{
        target: "http://192.168.10.xxx:8090",
        changeOrigin: true,
        pathRewrite:{'.+?/rest':'/rest'},
        onProxyReq (proxyReq, req, res) {
            // 设置cookie
            proxyReq.setHeader('cookie', "SESSION=ZT-f4453be3-f1fd-4997-a4fb-98dd6fc8839e") 
        }
      }
    }
  }