web-dev-qa-db-ja.com

Ajax呼び出しでノードを作成するにはどうすればよいですか?

カスタムフォームがモーダルで開かれているサイトがあり、送信時にajax関数をPOST to a REST service to a nodeを呼び出します。

問題は、送信時に「Forbidden」の応答が繰り返し表示されることです。

ログインしたユーザーだけがこれらのajaxリクエストを送信できるようにしたいのですが、authはユーザーごとに異なるトークンにする必要があります。

これが私のコードです:

$('#create-node-submit').click(function(e) {
    e.preventDefault();
    var newNode = {
        _links: {
            type: {
                href: 'http://mysite.dev/rest/type/node/article'
            }
        },
        type: {
            target_id: 'article'
        },
        title: {
            value: 'This is a test Article from REST'
        },
        field_description: {
            value: 'Here is some test description.'
        }
    };
    getCsrfToken(function (csrfToken) {
        postNode(csrfToken, newNode);
    });

    return false;
});

function getCsrfToken(callback) {
    $.get(Drupal.url('rest/session/token'))
        .done(function (data) {
            var csrfToken = data;
            callback(csrfToken);
        });
}

function postNode(csrfToken, node) {
    $.ajax({
        url: 'http://mysite.devdev/entity/node?_format=hal_json',
        method: 'POST',
        headers: {
            'Content-Type': 'application/hal+json',
            'X-CSRF-Token': csrfToken
        },
        data: JSON.stringify(node),
        success: function (node) {
            console.log(node);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("Status: " + textStatus);
            console.log("Error: " + errorThrown);
        }
    });
}

POSTMANでテストを実行すると、テストは成功しますが、認証は少し異なります enter image description here

写真を見るとわかるように、ポストマンを使用すると201が作成されます。

JavaScriptの実装で使用されているCSRFトークンに関係していると思います。 JSを介して同じサイトにPOSTするときに使用するはずの認証方法がわかりません。

こちら という情報を使用しました。

CSRFトークンのチェックに成功し、アクセスを許可しているように見えるが、他の場所からアクセスが拒否されたため、バグレポートを作成しました。 問題#2831251 REST with ajax POSTリクエストで403レスポンスが返される

7
CR47

この問題は、D8のRest UIモジュールv.1.13のバグが原因でした。

これを書いている時点では、問題はモジュールで解決されていませんが、回避策があります。

この問題を回避するには、Rest UIからエクスポートされた構成を「認証」で調整する必要があります。

詳細はこちらをご覧ください: https://www.drupal.org/node/2831716#comment-11813802

2
CR47

Postman 、Google Chromeブラウザアプリを使用して、(テスト目的で)任意のサイトに対してPOST、GET、PATCH、DELETEを実行して、あなたのためのコード:

enter image description here

写真に示されている3つのステップを完了した後、さらに1つのステップを実行する必要があります。

  1. 次に、コードをカスタムモジュールに貼り付けます。

PS:postman-tokenheadersの行。

1
No Sssweat