SpringBoot|web应用开发-CORS跨域资源共享

一、什么是跨域

　　浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域　　

　　域名：　　　

　　　主域名不同 http://www.baidu.com/index.html -->http://www.sina.com/test.js
　　　子域名不同 http://www.666.baidu.com/index.html -->http://www.555.baidu.com/test.js
　　　域名和域名ip http://www.baidu.com/index.html -->http://180.149.132.47/test.js　　

　　端口：　　　

　　　　http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js　　

　　协议：　　　

　　　　http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js　　

　　备注：　　　

　　　1、端口和协议的不同，只能通过后台来解决
　　　2、localhost和127.0.0.1虽然都指向本机，但也属于跨域

二、其他

　　跨域资源共享标准新增了一组HTTP首部字段允许服务器声明哪些源站通过浏览器有权限访问哪些资源

　　CorsFilter / WebMvcConfigurer / @CrossOrigin 需要SpringMVC 4.2 以上的版本才支持，对应SpringBoot 1.3 版本以上都支持这些CORS特性。不过，使用SpringMVC4.2 以下版本的小伙伴也不用慌，直接使用方式4通过手工添加响应头来授权CORS跨域访问也是可以的

三、后端解决方案

　　1、返回新的CorsFilter（建议）

package com.example.demo.config;


import org.springframework.context.annotation.Bean;
import org.springframework.http.HttpMethod;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

public class CorsConfig {


    @Bean
    public CorsFilter corsFilter(){
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);//允许cookies跨域
        config.addAllowedOrigin("*");//#允许向该服务器提交请求URI，*表示全部允许，在SpringMVC中，如果设置成*，会自动转换成当前请求头中的Origin
        config.addAllowedHeader("*");//允许访问的头信息，*表示全部
        config.setMaxAge(18000L);//预检请求的缓存时间(秒)，即在这个时间段里，对于相同的跨域请求不会再预检了
        config.addAllowedMethod(HttpMethod.POST);//允许提交请求的方法，*表示全部允许
        config.addAllowedMethod(HttpMethod.OPTIONS);
        config.addAllowedMethod(HttpMethod.GET);
        config.addAllowedMethod(HttpMethod.PUT);
        config.addAllowedMethod(HttpMethod.DELETE);
        config.addAllowedMethod(HttpMethod.PATCH);
        config.addAllowedMethod(HttpMethod.HEAD);
        source.registerCorsConfiguration("/**",config);
        return new CorsFilter(source);
    }
}

 　　2、重写WebMvcConfigurer

@Configuration
public class WebMvcConfg implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }

}

　　3、使用注解（@CrossOrigin）

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
 
 
@Controller
@RequestMapping("/admin/sysLog")
@CrossOrigin
public class SysLogController {

}

　　4、手工设置响应头（HttpServletResponse）

　　　　这种方式，可以自己手工加到，具体的controller，inteceptor，filter等逻辑里

@RequestMapping("/test")
@ResponseBody
public String test(){
response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
return "success";
}

四、总结

　　以上是设置cors跨域后端解决的四种方式，本质都是类似最后一种设置响应头，不过都是各自包实现了不同的封装逻辑

扩展

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS