Angular前端调用Play Framework后端接口触发CORS跨域问题咨询

为什么前端发起GET请求，后端会收到OPTIONS请求 #

这是浏览器的CORS预检机制导致的：

• 跨域请求分为简单请求和非简单请求，当请求属于非简单请求时，浏览器会自动先发送OPTIONS方法的预检请求，校验后端是否允许当前跨域访问，只有预检通过后才会发送实际的GET请求。
• Postman属于客户端工具，不会执行CORS预检逻辑，因此直接发GET就能正常获取结果。
  常见触发非简单请求的场景包括请求携带自定义头、Content-Type不符合简单请求要求等，你的场景中AngularJS的$http默认携带的请求头触发了预检机制。

解决方案（基于Play Framework） #

你目前只配置了允许跨域的源，没有完整开启CORS处理逻辑，按以下步骤配置即可：

1. 引入Play官方过滤器依赖 #

在build.sbt中添加CORS过滤器依赖：

libraryDependencies += filters

2. 补全application.conf的CORS配置 #

替换你之前的单条跨域配置，添加完整的CORS规则：

# 启用CORS过滤器
play.filters.enabled += play.filters.cors.CORSFilter
# 允许的访问源，生产环境建议替换为实际前端地址http://localhost:3001更安全
play.filters.cors.allowedOrigins = ["*"]
# 允许的HTTP方法，必须包含OPTIONS
play.filters.cors.allowedHttpMethods = ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
# 允许的请求头
play.filters.cors.allowedHttpHeaders = ["*"]
# 预检请求缓存时长，避免每次请求都重复发送OPTIONS
play.filters.cors.preflightMaxAge = 1 hour

3. 可选（旧版本Play需配置）：添加OPTIONS路由兜底 #

如果配置完过滤器还是报OPTIONS请求错误，在conf/routes文件顶部添加路由规则：

OPTIONS   /*all   controllers.Application.options(all: String)

然后在对应的Application控制器中添加处理逻辑：

public Result options(String all) {
    return ok().withHeaders(
        "Access-Control-Allow-Origin", "*",
        "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers", "*"
    );
}

额外注意点 #

你当前代码中的请求URL拼接为'sample' + 'generalInfo'，实际拼接结果为samplegeneralInfo，和报错日志中的/sample/generalInfo路径不一致，注意检查是否漏写了路径分隔符/。

内容的提问来源于stack exchange，提问作者Jonio