处理CORS

在开发REST应用时,很多时候,是通过页面的JavaScript和后端的REST API交互。

在JavaScript与REST交互的时候,有很多安全限制。默认情况下,浏览器按同源策略放行JavaScript调用API,即:

  • 如果A站在域名a.com页面的JavaScript调用A站自己的API时,没有问题;

  • 如果A站在域名a.com页面的JavaScript调用B站b.com的API时,将被浏览器拒绝访问,因为不满足同源策略。

同源要求域名要完全相同(a.comwww.a.com不同),协议要相同(httphttps不同),端口要相同 。

那么,在域名a.com页面的JavaScript要调用B站b.com的API时,还有没有办法?

办法是有的,那就是CORS,全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。如果A站的JavaScript访问B站API的时候,B站能够返回响应头Access-Control-Allow-Origin: http://a.com,那么,浏览器就允许A站的JavaScript访问B站的API。

注意到跨域访问能否成功,取决于B站是否愿意给A站返回一个正确的Access-Control-Allow-Origin响应头,所以决定权永远在提供API的服务方手中。

关于CORS的详细信息可以参考MDN文档,这里不再详述。

使用Spring的@RestController开发REST应用时,同样会面对跨域问题。如果我们允许指定的网站通过页面JavaScript访问这些REST API,就必须正确地设置CORS。

有好几种方法设置CORS,我们来一一介绍。

使用@CrossOrigin

第一种方法是使用@CrossOrigin注解,可以在@RestController的class级别或方法级别定义一个@CrossOrigin,例如:

  1. @CrossOrigin(origins = "http://local.liaoxuefeng.com:8080")
  2. @RestController
  3. @RequestMapping("/api")
  4. public class ApiController {
  5. ...
  6. }

上述定义在ApiController处的@CrossOrigin指定了只允许来自local.liaoxuefeng.com跨域访问,允许多个域访问需要写成数组形式,例如origins = {"http://a.com", "https://www.b.com"})。如果要允许任何域访问,写成origins = "*"即可。

如果有多个REST Controller都需要使用CORS,那么,每个Controller都必须标注@CrossOrigin注解。

使用CorsRegistry

第二种方法是在WebMvcConfigurer中定义一个全局CORS配置,下面是一个示例:

  1. @Bean
  2. WebMvcConfigurer createWebMvcConfigurer() {
  3. return new WebMvcConfigurer() {
  4. @Override
  5. public void addCorsMappings(CorsRegistry registry) {
  6. registry.addMapping("/api/**")
  7. .allowedOrigins("http://local.liaoxuefeng.com:8080")
  8. .allowedMethods("GET", "POST")
  9. .maxAge(3600);
  10. // 可以继续添加其他URL规则:
  11. // registry.addMapping("/rest/v2/**")...
  12. }
  13. };
  14. }

这种方式可以创建一个全局CORS配置,如果仔细地设计URL结构,那么可以一目了然地看到各个URL的CORS规则,推荐使用这种方式配置CORS。

使用CorsFilter

第三种方法是使用Spring提供的CorsFilter,我们在集成Filter中详细介绍了将Spring容器内置的Bean暴露为Servlet容器的Filter的方法,由于这种配置方式需要修改web.xml,也比较繁琐,所以推荐使用第二种方式。

测试

当我们配置好CORS后,可以在浏览器中测试一下规则是否生效。

我们先用http://localhost:8080在Chrome浏览器中打开首页,然后打开Chrome的开发者工具,切换到Console,输入一个JavaScript语句来跨域访问API:

  1. $.getJSON( "http://local.liaoxuefeng.com:8080/api/users", (data) => console.log(JSON.stringify(data)));

上述源站的域是http://localhost:8080,跨域访问的是http://local.liaoxuefeng.com:8080,因为配置的CORS不允许localhost访问,所以不出意外地得到一个错误:

cors-deny

浏览题打印了错误原因就是been blocked by CORS policy

我们再用http://local.liaoxuefeng.com:8080在Chrome浏览器中打开首页,在Console中执行JavaScript访问localhost

  1. $.getJSON( "http://localhost:8080/api/users", (data) => console.log(JSON.stringify(data)));

因为CORS规则允许来自http://local.liaoxuefeng.com:8080的访问,因此访问成功,打印出API的返回值:

cors-ok

练习

处理CORS - 图3下载练习:使用CORS控制跨域 (推荐使用IDE练习插件快速下载)

小结

CORS可以控制指定域的页面JavaScript能否访问API。

读后有收获可以支付宝请作者喝咖啡,读后有疑问请加微信群讨论:

处理CORS - 图4 处理CORS - 图5