XHR POST資格情報とヘッダーを送信できません

Question

私が望んでいる奇妙な問題が発生しているのは、非常に簡単な解決策です。サーバーにPOSTリクエストを送信しようとしています。私はフェッチを使用し、XMLHttpRequestを使用してこれを試しました。私のXHRリクエストは、次のようになります。

fetch(location, { 
     credentials: 'include', 
     method: 'post', 
     body: JSON.stringify({obj}), 
     headers: { 
     'Content-Type': 'application/json' 
    }) 
    .then((response) => { 
     if (response.ok){ 
     response = response.json(); 
     } else { 
     response = {}; 
     } 
     window.console.debug(response); 
    }) 
    .then((json) =>{ 
     window.console.debug(json); 
    }) 
    .catch((error) => { 
     window.console.debug(error); 
    }); 

これらのどちらも同じ結果を有する：

var xhr = new XMLHttpRequest(); 
xhr.open("POST", location); 
xhr.withCredentials = true; 
xhr.setRequestHeader('Content-Type', 'application/json'); 
xhr.send(JSON.stringify(obj)); 

要求は次のようになりますフェッチマイ。私は削除する場合

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:content-type 
Access-Control-Request-Method:POST 
Connection:keep-alive 
Host:192.168.146.101:8005 
Origin:http://localhost:8555 
Referer:http://localhost:8555/ 
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 

：私は上記のようにそれを残す場合は、資格情報は、OPTIONS要求を送信し、私はメッセージのために401マイクロームネットワークタブリクエストヘッダを取得するので、このようになります送信されません。ヘッダ行、コンテンツタイプが誤ったタイプである（明らかに）ので、私は415クロームネットワークタブリクエストヘッダのメッセージは次のようになり得る：私は、ヘッダーを追加するときに、いくつかの理由

Accept:*/* 
Accept-Encoding:gzip, deflate 
Accept-Language:en-US,en;q=0.8 
Authorization:Basic YWRtaW46YWRtaW4= 
Connection:keep-alive 
Content-Length:504 
Content-Type:text/plain;charset=UTF-8 
Host:192.168.146.101:8005 
Origin:http://localhost:8555 
Referer:http://localhost:8555/ 
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 

、それは資格情報を削除します。私は、符号化されたユーザーを送信しようとしました：（実際のユーザ名/パスワードで明らかますが）、このようにもヘッダに渡します。これは、すべてのブラウザで起こっている

var xhr = new XMLHttpRequest(); 
xhr.open("POST", location); 
xhr.withCredentials = true; 
xhr.setRequestHeader('Content-Type', 'application/json'); 
xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa('user:pass'); 
xhr.send(JSON.stringify(obj)); 

。 ありがとうございました！

Answer 1

withCredentialsのみattibuteは、クロスサイトアクセス制御要求が資格情報を使用して行われるべきであるか否かを示し、私はわからないんだけど、これはあなたが https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

探しているものであれば、あなたはこれを試してたのですか？

var xhr = new XMLHttpRequest(); 
xhr.open("POST", location); 
xhr.setRequestHeader('Content-Type', 'application/json'); 
xhr.setRequestHeader('Authorization', 'Basic ' + btoa(user+':'+pass); 
xhr.send(JSON.stringify(obj)); 

Answer 2

私はこの問題を発見したと信じています。問題は実際には、OPTIONS要求を含む、すべてのものを認証するためにREST APIに応答するサーバーが設定されていることです。 OPTIONSリクエストは、私がこのクロスオリジンをやろうとしている場合にのみ作成されます。ブラウザはOPTIONSリクエストから認証を取り除いているように見えます。そして、私がヒットしようとしているサーバが何らかの不明な理由でOPTIONSリクエストを認証しているので、失敗します。だから私は今、私のコードをWARして、同じサーバー上でホストしてみたところ、認証の問題を乗り越えることができました。