Vue+Springboot解决跨域问题

奋斗吧
奋斗吧
擅长邻域:未填写

标签: Vue+Springboot解决跨域问题 HarmonyOS博客 51CTO博客

2023-05-19 18:24:20 184浏览

Vue+Springboot解决跨域问题,当出现跨域问题的时候,我首先想到的是通过后端解决,在springboot中加了@CrossOrigin注解来解决跨域问题,然而却出现了一


当出现跨域问题的时候,我首先想到的是通过后端解决,在springboot中加了@CrossOrigin注解来解决跨域问题,然而却出现了一下小问题,首先,我后端接口是参照restful风格开发的,当前端axios没有请求参数时,后端能够访问成功。

Vue+Springboot解决跨域问题_vue.js


Vue+Springboot解决跨域问题_spring boot_02


Vue+Springboot解决跨域问题_spring_03


Vue+Springboot解决跨域问题_spring boot_04

然而,当前端请求携带参数时,请求就访问失败

Vue+Springboot解决跨域问题_restful_05


Vue+Springboot解决跨域问题_vue.js_06


Vue+Springboot解决跨域问题_spring_07

当我百度查阅大量资料后,换了一种方式来解决前端请求的跨域问题,首先,在控制类上把@CrossOrigin注解去掉,然后在spring boot加一个配置类,在配置类中解决跨域问题

package com.luozhigang.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author Luo Zhigang
 * @since 2022/2/8 14:29
 */
//@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET","POST","DELETE","PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                //跨域允许时间
                .maxAge(3600);
    }
}
在一次重新启动后,浏览器就不再报跨域问题的错误了,转而换了一种错误

Vue+Springboot解决跨域问题_spring boot_08


这个好解决,直接把前后端代码请求方式统一一下


Vue+Springboot解决跨域问题_spring_09


Vue+Springboot解决跨域问题_跨域问题_10


Vue+Springboot解决跨域问题_restful_11


好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695