Spring Boot+Vue 前后端分离项目跨域之我走过的坑

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Spring Boot+Vue 前后端分离项目跨域之我走过的坑，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2572字，纯文字阅读大概需要4分钟。

内容图文

Spring Boot+Vue 前后端分离项目之我走过的坑

一、跨域问题

同源策略是一种约定，是浏览器最核心也是最基本的安全功能，指的是不同的同源策略进行访问可能会出现的安全性问题。

二、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.baidu.com/	http://www.baidu.com/index.html	否	同源（协议、域名、端口号相同）
http://www.baidu.com/	https://www.baidu.com/index.html	否	协议不同（http/https）
http://www.baidu.com/	http://www.wangyi.com/index.html	否	主域名不同（wangyi/baidu）
http://www.baidu.com/	http://iii.baidu.com/index.html	否	子域名不同（www/iii）
http://www.baidu.com:8080/	http://www.baidu.com:8000/	否	端口号不同（8080/8000）

三、跨域解决方法

1、Vue请求

我这里使用的是Spring Boot和Vue，Vue发送异步请求使用的是axios，引入axios后，发送异步请求

 axios({
        method: "post",
        url: "/admin/login",
        data: {
          username: this.username,
          password: this.password,
        },
      })

2、Spring Boot 接收数据

SpringBoot中可以使用@CrossOrigin这个注解来帮助我们解决前端访问后端产生的跨域问题。

@RestController
@CrossOrigin
@RequestMapping("/admin")
public class LoginController {
	....
}

如果在vue中没有设置请求表头，而后端的接收方法是这样的话,可能会出现400。

    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public Result loginPage(@RequestParam("username") String username,@RequestParam("password") String password){
	.......
	}

如果出现了可以这样修改就可以了,没有就不需要管

    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public Result loginPage(@RequestBody Map map,HttpServletResponse response){

3、cookie

如果要给浏览器种下一个cookie的话，则需要在Vue项目中的main.js文件中引用以下代码

axios.defaults.withCredentials = true

这表示接收cookie，但是Vue添加这一行代码后，@CrossOrigin这个注解就不管用了，跨域的问题还是存在，并且报错。

为了解决这个问题，我在网上查了很多教程。

有一种方法是在Spring Boot中配置跨域问题，但是我发现如果使用的是Spring Boot2.4以上版本就会出现这个问题：When allowCredentials is true, allowedOrigins cannot contain the specia

解决方法：将.allowedOrigins替换成.allowedOriginPatterns即可。

@Configuration
public class CrossConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer webMvcConfigurer2(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOriginPatterns("*")
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                        .maxAge(3600)
                        .allowCredentials(true);
            }
        };
    }
}

然后在请求方法中添加cookie，基本上就没有什么问题了。

参考大佬的：SpringBoot升级2.4.0所出现的问题：When allowCredentials is true, allowedOrigins cannot contain the specia

内容总结

以上是互联网集市为您收集整理的Spring Boot+Vue 前后端分离项目跨域之我走过的坑全部内容，希望文章能够帮你解决Spring Boot+Vue 前后端分离项目跨域之我走过的坑所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---