从jQuery成功CORS但AngularJs失败

我有我的Java Spring API与启用CORS，我想使用AngularJS进行调用。我第一次写了一个演示jQuery代码来测试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扩展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

来源

2016-03-28 Harshil Sharma

您还没有启用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 
})

来源

2016-03-28 07:31:56

我想到了，但它的工作很好的形式jQuery。 –

你能在这种情况下显示API响应头文件吗？你可以使用chrome调试工具来做到这一点。 –

我已经更新了所需的详细信息。 –

从jQuery成功CORS但AngularJs失败

回答

相关问题