springboot前后端分离跨域,vue跨域解决方案简书

　　最近用springboot vue集成开发了一个前端分离的个人博客网站，所以本文总结了开发中遇到的一个问题，关于使用vue和springboot开发前端分离的项目时如何解决跨域问题。这里分享两种方法，分别在前端vue和后台springboot中解决。

　　浏览器同源策略一、在VUE前端配置代理解决跨域(1)允许浏览器请求携带cookie(2)vue (2)在vue中配置代理解决跨域是第一步，设置统一访问路径是第二步，配置跨域代理是第三步，测试请求是第二步。springboot后端配置解决跨域你好，我是灰猿，一个擅长写bug的程徐苑！

浏览器同源策略

　　为什么会出现跨域问题？第一个定义一定要理解，就是浏览器的同源策略。

　　浏览器的同源策略是什么？简单来说，发送请求的浏览器的协议、域名、端口要和接收请求的服务器的协议、域名、端口一致。这样就可以完成交互，但显然是不可能的，尤其是在同一台电脑上开发一个前后端分开的项目，会用到两个端口。那么就形成了一个跨域的问题。

　　这里分享我用来解决跨领域问题的两种方法，

一、VUE前端配置代理解决跨域

（1）Vue中让浏览器请求携带cookie

　　先说说我是怎么发现跨域问题的。起初，我从前端浏览器向后台发送请求时没有携带浏览器的cookie，但这导致无法验证浏览器的请求。所以后来我用了一个方法，让浏览器在每次发送请求的时候，在http请求头中携带cookie。该方法如下：

　　在vue的main.js方法中编写以下代码：

　　//引入axios依赖

　　从“axios”导入axios

　　//让请求携带浏览器的cookie。

　　axios . defaults . with credentials=true

　　Vue.prototype.$axios=axios

　　上面的意思是引入了axios请求，也就是ajax请求，同时打开了写凭证。只有当withCredentials等于true时，cookie才会被携带。

（2）vue中配置代理解决跨域

　　在vue中解决跨域问题其实是比较简单的，因为每次从我们的浏览器发送请求时，URL的前半部分必须是相同的，比如http://localhost:8080/blogs和http://localhost:8080/login。我们可以把它们相同的URL提取出来，封装到axios.defaults.baseURL中，这样，我们每次发出请求，就可以简单地把请求地址写成“/blogs”，相当于简单地封装了URL头。

　　注意：设置统一请求路径的axios . defaults . baseurl=

　　“http://localhost:8080”应该写在axios.js中

　　但是在解决跨域问题时，我们应该把axios . defaults . base URL= 3358 localhost:8080 写成axios.defaults.baseURL="/api "。

　　这样我们每次请求的路径前面都会有“/api”的形式。

　　这也是第一步：

第一步，设置统一访问路径

　　在axios.js中设置axios . defaults . baseurl= 3358 localhost:8080 ，并编写axios.defaults.baseURL=/api

第二步、配置跨域代理

　　在babel.config.js的同级目录中创建一个新的js文件vue.config.js

　　在里面写下面这段代码：这段代码是一个配置用来解决跨域问题的代理。我这里后台服务器请求的连接是http://localhost:8081，所以如果你的不是就需要修改。

　　/**

　　*解决跨领域问题

　　* @ type { { devserver:{ /API :{ change origin:boolean，pathRewrite: {^/api:字符串}，target: string}}，host: string，open: boolean}}}

　　模块.导出={

　　devServer: {

　　主机：“本地主机”，

　　Open: true，//自动打开浏览器。

　　//代理配置表，可以将特定的请求代理配置到对应的API接口。

　　//例如，代理“localhost:8080/api/xxx”到“www.example.com/api/xxx

　　代理服务器：{

　　/api: {//匹配所有以/api 开头的请求路径

　　Target: 3358localhost: 8081 ，//代理目标的基路径

　　//secure: false，//如果是https接口，需要配置这个参数。

　　ChangeOrigin: true，//跨域支持

　　PathRewrite: {//重写路径：删除路径开头的“/api”。

　　^/api:

　　}

第三步、测试请求

　　如果我们想现在发送一个登录请求，该请求应该如下所示：

　　这个。$axios.post(/login )

二、springboot后端配置解决跨域

　　要解决springboot框架后端的跨域问题，只需要添加一个类CorsConfig，并使其实现WebMvcConfigurer接口，代码如下。一般来说，你可以在开发过程中直接复制代码。

　　导入org . spring framework . context . annotation . configuration；

　　import org . spring framework . web . servlet . config . annotation . CORS registry；

　　导入org . spring framework . web . servlet . config . annotation . webmvc configurer；

　　/**

　　*解决跨领域问题

　　@配置

　　公共类CorsConfig实现WebMvcConfigurer {

　　@覆盖

　　public void addCorsMappings(CORS registry注册表){

　　registry.addMapping(/** )。allowedOriginPatterns(* )。allowed methods(“GET”、“HEAD”、“POST”、“PUT”、“DELETE”、“OPTIONS”)。allowCredentials(true)。maxAge(3600)。allowed headers(“*”)；

　　}

　　以上两种解决跨域问题的方法，网上都有，但是比较复杂。经过自己的尝试和研究，以上两种方法都是自己测试成功的。当时配置了前后端。

　　所以朋友们有不同意见或者更好的方法，欢迎指正！

　　我是灰猿，下次再见！

　　关于SpringBoot和Vue交互的跨域问题的解决方法，本文到此为止。有关SpringBoot和Vue之间交互的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录