后端 Java 程序员眼中的 Vue——（三）Vue解决跨越问题

最新推荐文章于 2025-05-12 14:18:37 发布

厕所博士

最新推荐文章于 2025-05-12 14:18:37 发布

阅读量392

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/x123453316/article/details/107012682

Spring Boot 专栏收录该内容

5 篇文章

订阅专栏

本文介绍在SpringBoot和Vue前后端分离项目中，如何通过配置代理解决本地开发环境的跨域问题。前端通过创建vue.config.js文件，配置代理目标和源改变，实现与后端的无缝通信。

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

在 Spring Boot 和 Vue 的前后端分离项目中，线上、测试环境可以通过 Ngnix 来处理避免跨越问题，即前端往 Ngnix 上发，后端从 Ngnix 接收，就没有跨越问题。但如果我在本地运行前后端，或者自己是前端同事的电脑是后端。接口联调的时候会遇到跨越问题，怎么解决呢？

1.如果我是 Vue 前端可以：

配置代理

在项目下创建一个 js 文件，起名 vue.config.js,内容：

let proxyObj={};//定义代理空对象

proxyObj['/'] = {//拦截地址
    target: 'http://localhost:8081',//想转发的后端地址
    changeOrigin: true,//改变源
    pathRewrite: {//地址重写
        '^/': ''//''位置可以修改路径，''默认不修改
    }
}
module.exports = {//导出为 Vue 项目使用
    devServer: {//开发服务器
        host: 'localhost',//前端的 IP
        port: 8080,//前端的端口
        proxy: proxyObj//使用代理对象。
    }
}

在 proxyObj['/']对象中还可以配置前后端通信的 WebSocket 内容，配置略；在 devServer中还可以不配 host和port内容.也可以正常使用，它配置的是 node.js的启动时 Network 地址：

删除host和 port，再次启动 Node.js ,自动生成一组 ip 、端口的地址

好了先写这么多，感觉还是有实际用处的