javascript - Access-Control-Allow-Origin 在 AngularJS 应用程序中不起作用

Question

我正在尝试使用我的(CORS 兼容的)RESTful 服务

@Path("/greeting")
@GET
@Produces("application/json")
public Response greeting() {

    String result = "{\"id\":1,\"content\":\"Hello, World!\"}";

    return Response.ok() //200
            .entity(result)
            .header("Access-Control-Allow-Origin", "*")
            .build();
}

来 self 的 AngularJS 应用程序。

function ($scope, $http) {
    $scope.dashboard = "ESCO Dashboard";


    console.log('start');

    // Simple GET request example:
    $http({
        method: 'GET',
        url: 'http://localhost:8080/NobelGrid/api/users/greeting'
    }).then(function successCallback(response) {
        console.log('success');
        $scope.greeting = response.data;
    }, function errorCallback(response) {
        console.log('error');
    });


    console.log('end');

}

但是我有这个错误:

XMLHttpRequest cannot load http://localhost:8080/NobelGrid/api/users/greeting. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

使用 Chrome 的控制台网络这似乎是真的，因为响应 header 是:

无论如何从浏览器访问 REST 服务而不是从 Angular 应用程序， header 是正确的

我也试过这个教程:

https://spring.io/guides/gs/consuming-rest-angularjs/

使用他们的 RESTful 服务(也兼容 CORS，他们说)，但结果是一样的。

ps: 我使用 WebStorm 作为 IDE。

更新 - 已解决

在服务器端编写这个处理程序:

@Path("/greeting")
@OPTIONS
@Produces("application/json")
public Response greetingOPT() {


    return Response.status(200) //200
            .header("Access-Control-Allow-Origin", "*")
            .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS")
            .header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Codingpedia,Authorization")
            .build();
}

它有效。一开始它给了我另一个错误:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight [..]

但是在 GET 和 POST 的 Access-Control-Allow-Headers 中添加 Authorization 可以解决问题。

Answer 1

查看错误信息:

Response to preflight request

查看网络日志:

Request Method: OPTIONS

查看您的 API:

@GET

您需要为 the preflight OPTIONS request 编写处理程序在浏览器向您编写的处理程序发出 GET 请求之前。