记 一坑 CORS 在微服务的跨域问题

首先我们来了解一下为什么会有跨域这个问题出现

        像我这种搬砖的就是混口饭吃,写个接口跟我说跨域,只会基于百度以及Google编程的我只能默默开始浏览大佬的博客。首先跨域问题是主要是浏览器的同源策略,可以看一下羞涩难懂的官方文档。简单的来说就是a网站试图使用脚本来请求b网站的数据(这里的a、b网站不是同一个域)浏览器就会限制这种请求,也就是说XMLHttpRequest和Fetch等是遵循“同源规则”的,即只能访问自己服务器的指定端口的资源(同一服务器不同端口也会视为跨域)。

跨域的解决方法

跨域的解决方法有很多,下面我就以springboot为例。

方法一、如下图在网关zuul里增加CorsFilter过滤器

@SpringBootApplication
@EnableZuulProxy
public class DemoZuulApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoZuulApplication.class, args);
    }
    
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 允许cookies跨域
        config.addAllowedOrigin("*");// 允许向该服务器提交请求的URI,*表示全部允许。
        config.addAllowedHeader("*");// 允许访问的头信息,*表示全部
        config.setMaxAge(18000L);// 预检请求的缓存时间(秒),即在这个时间段里,对于相同的跨域请求不会再预检了
        config.addAllowedMethod("*");// 允许提交请求的方法,*表示全部允许,也可以单独设置GET、PUT等
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }

}

方法二、在请求的类中的配置

在controller添加@RestController注解

/**
 * @author wujing
 */
@RestController
@CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod.GET,RequestMethod.POST}, origins="*")
@RequestMapping(value = "api/user")
 
public class ApiUserController {
	@RequestMapping(value = "/{id}", method = RequestMethod.GET)
	public String view(@PathVariable int id) {
		return id+"ok";
	}
 
}

等我配置完后,美滋滋的重启服务,然后再去访问测试。测试一个接口,OK!完美运行。好,再来一个,结果就喜闻乐见。

这什么东西啊!!悲催的我又开始基于百度的编程了。到最后才发现后面接口失败的原因是该接口是返回一个文件给浏览器下载的,所以还需要在response添加以下的头信息

response.setHeader("Access-Control-Allow-Origin","*");

由于我太菜了,所以具体的原因还不是很清楚。按照我个人的猜测既然请求需要允许向该服务器提交请求的URL,那么反过来也需要允许向URL发送请求的服务器。如果有大佬知道具体流程的还望不吝赐教!这个坑就等我详细了解了再来填。有什么不对的地方也请大家指出!!

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐