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();
}

来自我的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无法加载http://localhost:8080/NobelGrid/api/users/greeting。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:63342”访问。

使用Chrome的控制台网络这似乎是正确的，因为响应标头是：

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

我也试过这个教程：

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();
}

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

请求标头字段预检中的Access-Control-Allow-Header不允许授权[..]

但是将Authorization添加到GET和POST的Access-Control-Allow-Headers即可解决问题。

Answer 1

查看错误消息：

对预检请求的响应

查看网络日志：

请求方法：选项

查看您的API：

@GET

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

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

1 个答案: