Spring Boot和Vue跨域请求问题原理解析

Spring Boot和Vue跨域请求问题原理解析

这篇文章主要介绍了Spring Boot和vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

Access to XMhttp://LHttpRequest 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.springframYGemrework.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);

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。