CORS问题与Angular 4应用程序调用Play Framework Web App

Question

我有一个构建在Angular 4和Node.JS上的前端应用程序堆栈，然后调用使用Play Framework构建的后端API。我现在有了CORS过滤器的问题。我已经启用了CORS过滤器上，如下我玩框架：

object MyController extends Controller { 

    implicit class RichResult (result: Result) { 
    def enableCors = result.withHeaders(
     "Access-Control-Allow-Origin" -> "*" 
     , "Access-Control-Allow-Methods" -> "OPTIONS, GET, POST, PUT, DELETE, HEAD" // OPTIONS for pre-flight 
     , "Access-Control-Allow-Headers" -> "Accept, Content-Type, Origin, X-Json, X-Prototype-Version, X-Requested-With" //, "X-My-NonStd-Option" 
     , "Access-Control-Allow-Credentials" -> "true" 
    ) 
    } 

    def powerPlantDetails(id: Int) = Action.async { 
    dbService.powerPlantById(id).flatMap { 
     case None => 
     Future.successful(
      NotFound(s"HTTP 404 :: PowerPlant with ID $id not found").enableCors 
     ) 
     case Some(powerPlantRow) => 
     Future.successful(
      Ok(Json.prettyPrint(
      Json.toJson(toPowerPlantConfig(powerPlantRow))) 
     ).enableCors 
     ) 
    } 
    } 
} 

但是，当我把这个端点从我的角度4应用程序，我可以从我的戏框架的服务器日志，它的确是进来作为一个选项，请见要求：

[info] application - OPTIONS /powerPlants?onlyActive=false&page=1 took 0ms HTTP status >> 404 
[info] application - OPTIONS /powerPlants?onlyActive=false&page=1 took 0ms HTTP status >> 404 

这是为什么？我如何确保我的Angular 4应用程序正在执行GET而不是OPTIONS？

编辑：如果我把从Chrome中的高级REST客户端我的发挥框架的应用程序，我看到以下内容：

application - GET /powerPlants?onlyActive=false&page=1 took 25694ms HTTP status >> 200 
(Access-Control-Allow-Origin,*) 
(Access-Control-Allow-Headers,Accept, Content-Type, Origin, X-Json, X-Prototype-Version, X-Requested-With) 
(Access-Control-Allow-Methods,OPTIONS, GET, POST, PUT, DELETE, HEAD) 
(Access-Control-Allow-Credentials,true) 

而且可以看出，它在，实际上是一个GET请求，但它如果我从我的Angular应用程序中调用相同的终点，但对我来说这很奇怪，却无法做到这一点！

Answer 1

不确定具体是关于这个问题的，但是如果你有问题请求CORS，那就用这个chrome extension（允许控制允许原点）。

这将让你做，而不需要通过任何额外的参数headers/configCORS请求。

缺点是，它不适用于CORS patch request。

Answer 2

所以好像我已经找到了问题。这是我get函数在我的角度应用：

get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> { 
    return this.http.get(`${environment.api_url}${path}`, { headers: this.setHeaders(), search: params }) 
     .catch(this.formatErrors) 
     .map((res: Response) => res.json()); 
    } 

这是setHeaders功能：

private setHeaders(): Headers { 
    const headersConfig = { 
     'Content-Type': 'application/json', 
     'Accept': 'application/json', 
     'Access-Control-Allow-Origin': '*', 
     'Access-Control-Request-Headers': 'content-type' 
    }; 

我不得不完全删除这个！所以我现在看起来像：

get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> { 
    return this.http.get(`${environment.api_url}${path}`, { search: params }) 
     .catch(this.formatErrors) 
     .map((res: Response) => res.json()); 
    } 

我不确定这是否正确，但确实摆脱了问题！我可以从我的播放服务器看到记录以下：

[info] application - GET /powerPlants?onlyActive=false&page=1 took 1539ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 1549ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 1607ms HTTP status >> 200 

Answer 3

你知道Play提供内置的CORS在过滤器的形式处理？有关详细信息，请参阅https://www.playframework.com/documentation/2.6.x/CorsFilter。

这减轻了手动处理CORS的负担。