

JavaScriptでPOSTリクエストを送りたいです。  
サーバ側から要求されたヘッダー情報は以下の通りです。

  * Basic認証
  * 'Accept'は'application/json'
  * 'Content-Type'は'application/json'
  * 'Content-Length'は'*'
  * bodyとしてJSON形式のemail  
それで、自分のコードです。

[code]     var btn = document.getElementById('btn');

    
    btn.addEventListener( 'click' , function() {
    
        var clientId = "*自分のID*";
        var clientSecret = "*自分のPW*";
        var data = { email:"*自分のemail*" };
    
        var authorizationBasic = window.btoa(clientId + ':' + clientSecret);
    
        var request = new XMLHttpRequest();
        request.open('POST', '*サーバURL*');
        request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic);
        request.setRequestHeader('Accept', 'application/json');
        request.setRequestHeader('Content-Type', 'application/json');
        //request.setRequestHeader('Content-Length', '*');
        request.send(JSON.stringify(data));
    
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                alert(request.responseText);
            }
        };
    
    } );
    
[/code]

HTMLで実行してもMACのターミナルで実行してもうまく行かないんですが、どこが間違っているんでしょうか？  
(HTMLで実行したときChromeではヘッダーとしてContent-Lengthを設定することはできないそうで、そこはコメントアウトしています。)

ちなみに、HTMLで実行したら以下のエラーでした。

[code]

    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404
    
[/code]


CC BY-SA 3.0
2017-05-23T05:21:14.930
34954
2017-05-24T03:51:42.613
2017-05-23T06:02:22.380
3054
23312
question
javascript html http
JavaScriptでBasic認証を付けたPOSTリクエストを送る


Basic認証は下記URIでリクエスト出来ます。

[code]

    http://user:password@example.com/
    
[/code]

click イベントハンドラ内で適切なURIを作成し、`XMLHttpRequest.prototype.open`
の第二引数に指定すれば実装可能だと思います。


CC BY-SA 3.0
2017-05-23T09:25:36.117
34961
2017-05-23T09:25:36.117
20262
34954
answer


動作環境が見えないの間違っていたら申し訳ないです。  
エラーから  
アプリなどから通信を行う場合、サーバドメインがlocalhostになり 結果、クロスオリジンの通信になって 'Access-Control-Allow-
Origin'が必要と通知されていると思います。

BASIC認証を送るには  
AJAXリクエストでクレデンシャル（クッキーの送信またはBASIC認証）を必要とする場合は、それを許可するオプション
request.withCredentials = true; を付ける必要があると思います。  
更に、クロスオリジンの通信を行う時は、setRequestHeader( 'X-Requested-With', 'XMLHttpRequest'
);などオプションが必要で、 サーバからは、クロスオリジン許可するheaderを（Access-Control-Allow-
Originや他にも必要なeader）出力することが必須になります。

気になった事  
POST（要請メソッド）の時のContent-Typeは、通常「application/x-www-form-urlencoded」です。  
send( 'json_data='+JSON.stringify({test:"1234567890"})
)と送ると、phpのでの例ですが、$_POST['json_data']で受け取れデバッグが楽です。


CC BY-SA 3.0
2017-05-24T03:51:42.613
34973
2017-05-24T03:51:42.613
22793
34954
answer