CORS jQueryから成功しましたが、AngularJsで失敗します

Question

AngularJSを使用してCORSを呼び出して呼び出したいJava Spring APIがあります。私はCORSをテストするためのデモjQueryコードを書きましたが、それは完全に機能しました。 CORSの要求を行うときに変更がAngularJSで必要とされていないと言うが、それはいないようですAngularJS最も結果からCORS要求をすることについての研究では

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のコードを書きました働く私が間違っている、または行方不明のことは何ですか？ BTW私はAngularJS v1.3.15を使用しています。

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

} 

Iが最初に完全に実行される次のように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; 
       }); 
      }); 

後

私は（BaseWebConfigがWebMvcConfigurerAdapterを拡張）SpringアプリケーションでCORSを有効にした方法であります私は次のように相当する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レスポンスヘッダーは次のとおりです。最初の応答の

ヘッダー - - 2番目の応答の

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 

ヘッダー - あなたはまだCORSを有効にしていない

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

を二つの呼び出しは、実際には、ブラウザによって作られています。 Access-Control-Allow-OriginヘッダーはCORSの場合は*に設定する必要があります。

.allowedOrigins("http://localhost:8000");以上でお試しください。.allowedOrigins("*");。 https://spring.io/guides/gs/rest-service-cors/

401から、私は認証に何らかのエラーがあると思います。以下のようにheaderの代わりにheadersを使用し、これが機能するかどうか確認してください。

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