使用axios出现的跨域问题

前言

最近在使用SpringBoot和Vue进行前后端分离开发，且测试功能时，出现了此异常：
CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

通过查看相关资料后发现是由于CORS跨越问题造成的，得知解决办法无非有两种方式：响应头添加参数和添加过滤器。

什么是CORS

CORS，常被大家称之为跨越问题，准确的叫法是跨域资源共享（CORS，Cross-origin resource sharing），是W3C标准，是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

解决办法

• 使用过滤器

@Configuration
public class AccessControlAllowOriginFilter extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/*/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST","UPDATE","DELETE")
                .allowCredentials(false).maxAge(3600);
    }
}

• 在需要的地方添加CrossOrigin注解

@CrossOrigin(origins = "http://192.168.1.97:8080", maxAge = 3600)
@RequestMapping("rest_index")
@RestController
public class IndexController{

• 添加响应头

在被请求资源中添加响应头信息"Access-Control-Allow-Origin：*