SpringBoot与Vue交互解决跨域问题【亲测已解决】(1)

在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.baseURL = "http://localhost:8080"写成axios.defaults.baseURL = “/api”。

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

这也是第一步：

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

在axios.js中设置axios.defaults.baseURL = "http://localhost:8080"写成axios.defaults.baseURL = “/api”

第二步、配置跨域代理

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

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

/**

• 解决跨域问题

• @type {{devServer: {proxy: {“/api”: {changeOrigin: boolean, pathRewrite: {“^/api”: string}, target: string}}, host: string, open: boolean}}}

*/

module.exports = {

devServer: {

host: ‘localhost’,

open: true, // 自动打开浏览器

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

// 例如将’localhost:8080/api/xxx’代理到’www.example.com/api/xxx’

proxy: {

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

target: ‘http://localhost:8081’, // 代理目标的基础路径

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

changeOrigin: true, // 支持跨域

pathRewrite: { // 重写路径: 去掉路径中开头的’/api’

‘^/api’: ‘’

}

}

}

}

}

第三步、测试请求

如我们现在要发送login登录请求，那么请求应该是这样写的：

this.$axios.post(“/login”)

二、springboot后端配置解决跨域

在springboot框架的后端想要解决跨域问题，只需要添加一个类CorsConfig，并且让它实现WebMvcConfigurer接口， 其中代码如下，一般在开发的时候直接将代码复制过去就可以了。

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**

• 解决跨域问题

*/

@Configuration

public class CorsConfig implements WebMvcConfigurer {

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping(“/**”)

.allowedOriginPatterns(“*”)

.allowedMethods(“GET”, “HEAD”, “POST”, “PUT”, “DELETE”, “OPTIONS”)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！