Spring boot 和Vue开发中CORS跨域问题解决

跨域资源共享cors（cross-origin resource sharing），是w3c的一个标准，允许浏览器向跨源的服务器发起xmlhttprequest请求，克服ajax请求只能同源使用的限制。关于cors的详细解读，可参考阮一峰大神的博客：跨域资源共享cors详解。

1. 遇到的问题：

我用spring-boot 做rest服务，vue做前端框架，用了element-admin-ui这个框架做后台管理。在调试的过程中遇到了如下错误:

preflight response is not successful

2. 分析问题

这个问题是典型的cors跨域问题。

所谓跨域：

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

3. 解决方法

在项目中添加类customcorsconfiguration 代码如下：

import org.springframework.context.annotation.bean;
import org.springframework.context.annotation.configuration;
import org.springframework.web.cors.corsconfiguration;
import org.springframework.web.cors.urlbasedcorsconfigurationsource;
import org.springframework.web.filter.corsfilter;

/**
 * @author spartajet
 * @description
 * @create 2018-05-15 下午5:00
 * @email [e-mail]
 */
@configuration
public class customcorsconfiguration {
  private corsconfiguration buildconfig() {
    corsconfiguration corsconfiguration = new corsconfiguration();
    corsconfiguration.addallowedorigin("*");
    corsconfiguration.addallowedheader("*");
    corsconfiguration.addallowedmethod("*");
    corsconfiguration.setallowcredentials(true);
    return corsconfiguration;
  }

  @bean
  public corsfilter corsfilter() {
    urlbasedcorsconfigurationsource source = new urlbasedcorsconfigurationsource();
    source.registercorsconfiguration("/**", buildconfig());
    return new corsfilter(source);
  }
}

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