vue.js + springboot 编写前后端分离项目产生的跨域问题

最新推荐文章于 2025-06-10 11:40:31 发布

原创最新推荐文章于 2025-06-10 11:40:31 发布 · 277 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue #spring boot

本文深入探讨了前后端分离项目中跨域问题的产生原因及解决方案，详细讲解了如何在开发环境中配置代理以解决跨域问题。

在开发前后端分离的网站时，跨域是我们经常能遇到的问题。对于没有经验的开发者来讲，在开发过程中跨域也是一个很棘手的问题。
发出跨域请求时候的提示

产生跨域问题的原因

浏览器出于安全原因会阻拦不同域名之间的请求，以防止跨域攻击。跨域攻击是通过浏览器cookies的漏洞，让一个危险网站通过保存的cookies进行一些危险的操作。具体跨域攻击的技术细节和防御原理在这里就不多讲了。
一般来讲，当两个地址的协议、主机名、端口有一个不一样的时候，就会被视为跨域。

前后端分离项目的跨域问题

生产环境

在前后端分离项目的生产环境中，前端只是一些静态文件。
举个例子，我们可以把打包好的jar包跑在81端口，然后用nginx来监听80端口，并用root来指定打包好的静态前端文件。所有对后端server的访问都可以通过nginx来转发，所以不会产生跨域问题。

开发环境

在开发环境中，一般我们会把前端项目用node跑在本地（localhost）的某个端口上（默认8080），同时，spring boot会跑在本地的另一个端口上（无法与node server跑在同一个端口）。由于端口不同，此时会产生跨域问题。
在开发环境中，我们可以在vue的根目录下建立一个文件:vue.config.js （需跟package.json 在同一文件夹）：

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:81",
                changeOrigin: true,
                ws:true,
                pathRewrite: {
                    "/api/": '/api/'
                }
            }
        }
    }
};

这样前端文件中所有对/api 的访问都会被自动转发至localhost:81 ，从而解决了开发环境产生的跨域问题。
这段代码中，devServer.proxy 就是为前端跨域请求设置的代理，changeOrigin: true 代表了请求需要跨域，必须要加，而pathRewrite 为路径重写表，代理转发请求的时候会按照该表重写请求。更多具体参数可以参考vue.js的官方文档：devServer.proxy 。