AngularJS-CORS HTTP GETでのみエラーが発生する

Question

AngularJSからHTTPリクエストを取得しようとしています。それはInternet Explorer 11でのみ動作しています。私はChrome、Firefox、またはEdgeでPOSTコールを作成しようとすると動作しません。

私は次のエラーを取得する：

CORS Error in Chrome

これは私のAngularJSの呼び出しです：バックエンドとして

$http({ 
       method: 'POST', 
       headers: { 
       'Content-Type': 'application/json' 
       }, 
       url: URL 
       }).then(function successCallback(response) { 
        console.log(response.data); 

       }, function errorCallback(response) { 
       console.log(response.status); 
       console.log(response.headers); 
       console.log(response.config); 
       }); 

私は、JavaのSpring MVCアプリケーションを持っていると私は以下のヘッダを設定している：

を

HttpHeaders responseHeader = new HttpHeaders(); 
    responseHeader.set("Access-Control-Allow-Origin","*"); 
    responseHeader.set("Access-Control-Allow-Headers:","Content-Type"); 
    responseHeader.set("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE"); 
    responseHeader.set("Content-Type","application/json"); 

しかし、私は角度が決してバクに届かないのを見ました私はブレークポイントを設定するときにくねくね！これは、私はすでに、インターネットで多くのことを検索し、デフォルトのAngularJS Content-Typeヘッダを変更しようとした、非常に紛らわしいです：

$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'; 

私はPOSTリクエストのContent-Typeは変更することも試み

への「アプリケーション/ x-www-form-urlencoded " - 効果はありません。

注：バックエンドとフロントエンドは同じ開発マシンで動作します。唯一の違いはポートです。そのため、CORSエラーが発生するのは混乱しています。

私はこの問題はPOSTリクエストでのみ発生しています。編集1

チャームのような作品をGET：

私はこれがCORS通報していると私は別のポートを使用することをと思ったが、それは私がそれをオフにすることができますことは可能でしょうか？

編集2：

今私はそれをローカルのTomcatで動作するように取得しよう。今私は、要求がサーバーに到達しますTomcatの中で参照してください。

<< Client IP>> - - [28/Jun/2017:13:43:24 +0200] "OPTIONS <<URL>> HTTP/1.1" 403 - 

レスポンスが今私には、次のリクエストヘッダを見ることができますブラウザのネットワークタブでHTTP 403です：

Host: <<backend ip>>:8080 
User-Agent: <<user agent>> 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: de,en-US;q=0.7,en;q=0.3 
Accept-Encoding: gzip, deflate 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: access-control-allow-origin,content-type 
Origin: http://<<Ip of host>> 
Connection: keep-alive 

その応答要求ヘッダーは、以下である：

Content-Type: text/plain 
Content-Length: 0 
Date: Wed, 28 Jun 2017 11:43:24 GMT 

IはCORSは、Tomcatのドキュメントの例のようにフィルタ設定されている：http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

私はget要求を出してもまだ動作しており、すべてのCORSヘッダーが存在します。 最初のOPTIONSリクエストに何か問題があると思います。 OPTIONSリクエストが来たときにtomcatがCORSヘッダを設定しない理由はわかりません。あなたの春のコントローラーで

Answer 1

私はそれを理解しました。私は完全に新しいangularjs testwebsiteを作った。これは私の動作角度ですコード：

var req = { 
method: 'POST', 
url: 'myURL', 
headers: { 
    'Content-Type': undefined 
}, 
data: "JSON BODY DATA" 
} 

$http(req).then(function successCallback(response) { 
    console.log(response.data); 
    }, function errorCallback(response) { 
    console.log(response.data); 
    }); 
}]); 

デフォルトのangularjsヘッダーを変更したものはすべて削除しました。私の春のMVCアプリケーションの ヘッダは次のとおりです。

HttpHeaders responseHeader = new HttpHeaders(); 
responseHeader.set("Access-Control-Allow-Origin","http://<<clientip>>"); 
responseHeader.set("Access-Control-Allow-Headers:","Content-Type"); 
responseHeader.set("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE"); 
responseHeader.set("Content-Type","application/json"); 

私はそれが今取り組んでいる理由を正確に原因を知りません。おそらくAngularJSのデフォルトヘッダーを変更したからです。

Answer 2

、@CrossOrigin('http://localhost:8080')

注釈を追加します。もちろん、角度のあるアプリケーションのポートを置き換えてください。

Answer 3

400（許可されていない）エラーが発生しているため、要求はサービス自体に届いていません。おそらくリクエストドメインがブロックされている可能性があります.XHRリクエストが許可されているかどうかを確認し、必要に応じてクロスオリジンポリシーをチェックします。