Spring Boot + Vue 跨域请求问题

Posted 咸鱼加点盐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Spring Boot + Vue 跨域请求问题相关的知识,希望对你有一定的参考价值。

使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求

Access to XMLHttpRequest at ‘http://localhost/open/login‘ from origin ‘http://localhost:8080‘ has been blocked by CORS policy: 
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

Vue中使用的Axios,配置main.js文件

Axios.defaults.baseURL = ‘http://localhost:80‘
Axios.defaults.headers[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘
Axios.defaults.withCredentials = true

Spring Boot中重写WebMvcConfigurationSupport的方法addCorsMapping

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

@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport{


    @Override
    public void addCorsMappings(CorsRegistry registry) {
        String[] origins = {"http://localhost:8080"};
        registry.addMapping("/**")
                .allowedOrigins(origins)
                .allowCredentials(true)
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

 

参考:https://blog.csdn.net/qq_16645099/article/details/89415997

以上是关于Spring Boot + Vue 跨域请求问题的主要内容,如果未能解决你的问题,请参考以下文章

Vue + Spring Boot + Shiro 跨域解决(开发+生产)

启用跨域请求 Spring Boot

spring boot跨域设置

部署spring boot + Vue遇到的坑(权限刷新404跨域内存)

Spring BootSpring Boot之跨域解决方案

Spring Boot2 跨域问题