web-dev-qa-db-ja.com

jQueryクロスドメインPOST shenanigans

APIに対して認証しようとしていますが、これでは、{"username"： "myusername"、 "password"の形式で、フォームデータとしてJSONを使用してPOSTを使用してのみ認証できます。 ："私のパスワード"}。

これをjQueryで機能させるために、2日間試しましたが、クロスドメインであるため、問題が発生しています。どうすればこれを達成できますか？

エラーメッセージ：

Request Method:OPTIONS
Status Code:405 METHOD NOT ALLOWED

これまでのコード：

var username = "myusername";
var password = "mypass"
var authurl = "https://myurl";

$.ajax
({
    type: "POST",
    url: authurl,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    async: false,
    data: {'json':'{"username":"' + username + '", "password":"' + password + '"}'},
    success: function (result) {
        $('#json').html(result);
    }
})

要約する：

  • APIは認証にPOST
  • APIではフォームデータとしてjsonが必要です。例：{"username"： "myusername"、 "password"： "mypassword"}
  • Jsが別のドメインから実行されているため、クロスドメインエラーが発生します

あなたの助けは大歓迎です:)

javascriptjqueryjsonpostcross-domain
16
FLX

別のパターンに従う必要があります。ローカルJSは、ローカルURLにajax投稿を行います。これは、jsonデータでPOSTメソッドを受け入れます。

この時点で、サーバーコードはHTTP POSTを適切なデータでリモートサーバーに送信し、応答を取得して、呼び出し元のjsに送り返します。

15
Matteo Mosca

問題は、POST toしようとしているドメインが、各クロスドメインリクエストの前に送信されるOPTIONSリクエストに応答しないことです。OPTIONSリクエストを使用すると、ブラウザはクロスに関する情報を受信します。ドメインルールなど。クロスドメインリクエストを有効にするには、サーバーはAccess-Control-Allow-Origin:*（または実際にはスクリプトのドメインですが*すべてをカバーします）とAccess-Control-Allow-Methods: GET, POST, OPTIONSヘッダーを設定する必要があります。

4
zatatatata

GoDaddyで共有ホスティングを利用しています。私もこの質問への答えが必要でした、そして周りを調べた後、それが可能であることがわかりました。

.htaccessファイルを作成し、アクションページと同じフォルダーに配置しました。 .htaccessファイルの内容は次のとおりです。

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "Origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

これが私のajax呼び出しです：

    $.ajax({
        url: 'http://www.mydomain.com/myactionpagefolder/gbactionpage.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });

参考のためにこの記事を参照してください：

。htaccessのヘッダーセットAccess-Control-Allow-Originは機能しません

2
TARKUS