欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-17 14:27:40
跨域资源共享cors(cross-origin resource sharing),是w3c的一个标准,允许浏览器向跨源的服务器发起xmlhttprequest请求,克服a...

跨域资源共享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 spartajet.guo@gmail.com
 */
@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);
  }
}

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