当前位置： 云海天教程网 > 技术新闻 > 编程最新 > 正文

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

  • 作者： 佚名     来源： 网络转载
  • 时间：2019-12-02

这篇文章主要介绍了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);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持云海天教程。