Question

我的Java Spring API启用了CORS，我想使用AngularJS调用它。我首先编写了一个演示jQuery代码来测试CORS，它运行得很好。然后我写了一个等效的AngularJS代码，它始终产生相同的错误 -

XMLHttpRequest cannot load http://localhost:8080/my_project_name/api/get_some_data. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 401.

在研究从AngularJS发出CORS请求时，大多数结果表明在进行CORS请求时AngularJS不需要进行任何更改，但它似乎不起作用。我有什么不对或错过的吗？顺便说一下，我使用的是AngularJS v1.3.15。

以下是我在Spring应用程序中启用CORS的方法（BaseWebConfig extends WebMvcConfigurerAdapter） -

public class WebConfig extends BaseWebConfig {

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        super.configureMessageConverters(converters);
        ResourceHttpMessageConverter resourceHttpMessageConverter = new ResourceHttpMessageConverter();
        converters.add(resourceHttpMessageConverter);
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // allow cross-origin API requests
        registry
                .addMapping("/api/**")
                .allowedMethods(
                        HttpMethod.GET.name(),
                        HttpMethod.HEAD.name(),
                        HttpMethod.POST.name(),
                        HttpMethod.PUT.name(),
                        HttpMethod.OPTIONS.name())
                .allowCredentials(false);
    }

}

我首先使用jQuery代码测试CORS，如下所示，它完美运行 -

$(function() {
                $('#submit_jquery').click(function() {
                    var token = $('#token').val().trim();
                    var headerValue = "Bearer " + token;
                    var body = $('#body').val().trim();
                    var domain = $('#api_domain').val().trim();
                    $('#result').text('');
                    $.ajax({
                        method : 'POST',
                        url : domain + '/api/get_some_data',
                        contentType : 'application/json',
                        data : body,
                        beforeSend : function(xhr) {
                            xhr.setRequestHeader("Authorization", headerValue);
                        },
                        success : function(json) {
                            console.log('success');
                            $('#result').html('<pre>' + JSON.stringify(json, undefined, 2) + '</pre>');
                        },
                        error : function(xhr, textStatus, errorThrown) {
                            console.log('error');
                        },
                        complete : function() {
                            console.log('complete');
                        }
                    });
                    return false;
                });
            });

然后我写了一个等效的AngularJS代码，如下所示 -

app.controller('CorsController', ['$scope', '$http',
                function($scope, $http) {
                    $scope.makeCorsRequest = function() {
                        var token = $('#token').val().trim();
                        var headerValue = "Bearer " + token;
                        var body = $('#body').val().trim();
                        var domain = $('#api_domain').val().trim();
                        var url = domain + '/api/get_some_data';
                        var header = {'Authorization': headerValue, 'Content-Type': 'application/json'};

                        $http({
                            method: 'POST',
                            url: url,
                            header: header,
                            data: body
                        }).then(
                                //success callback
                                function (data) {
                                    console.log('SUCCESS');
                                    console.log(data);
                                },
                                //error callback
                                function (errorMessage) {
                                    console.error('ERROR');
                                    console.error(errorMessage);
                                }
                        );
                    };
                }]);

从jQuery调用时的API响应头如下所示。实际上是由浏览器进行两次调用 -

第一反应的标题 -

Access-Control-Allow-Headers:accept, authorization, content-type
Access-Control-Allow-Methods:GET,HEAD,POST,PUT,OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1800
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Content-Length:0
Date:Mon, 28 Mar 2016 10:30:00 GMT
Server:Apache-Coyote/1.1
Vary:Origin

第二回应的标题 -

Access-Control-Allow-Origin:*
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json
Date:Mon, 28 Mar 2016 10:30:00 GMT
Expires:0
Pragma:no-cache
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
Vary:Origin
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

Answer 1

你还没有启用CORS。标题中需要Access-Control-Allow-Origin标题，以便为CORS设置为*。

尝试使用.allowedOrigins("http://localhost:8000");或更好地使用.allowedOrigins("*");。您可以在https://spring.io/guides/gs/rest-service-cors/

上阅读此内容

从401开始，我认为身份验证存在一些错误。使用headers代替header，如下所示，并检查是否有效。

$http({
    method: 'POST',
    url: url,
    headers: header, //use headers here
    data: body
})

来自jQuery的CORS成功但却失败了AngularJs

1 个答案: