0

ここでは、 Medium APIを使用して、WordPress フロント フォームからMediumプロファイルに新しい投稿を作成しようとしました。

jQuery(document).ready(function ($) {

    function get_tinymce_content(){
        if (jQuery("#wp-mediumcontenteditor-wrap").hasClass("tmce-active")){
            return tinyMCE.activeEditor.getContent();
        }else{
            return jQuery('#mediumcontenteditor').val();
        }
    }

    function formToJSON() {
        return JSON.stringify({
            "title": $('#m_title').val(),
            "contentFormat": 'html',
            "content": get_tinymce_content(),
            "tags": ["football", "sport", "Liverpool"],
            "publishStatus": 'public'
            });
    }

    // Perform AJAX
    $('form#medium').on('submit', function(e){
        $('p.status', this).show().text(ajax_magic_kuira.loadingmessage);
        ctrl = $(this);
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            type: 'POST',
            url: 'https://api.medium.com/v1/users/xxxuserID/posts',
            dataType: 'json',
            crossDomain: true,
            contentType: "application/json; charset=utf-8",
            data: formToJSON(),
            beforeSend: function (xhr) {
                xhr.setRequestHeader ("Authorization", "Bearer xxxxToken");
            },
            headers: {
                "Access-Control-Allow-Headers": 'Origin',
                'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
                'Access-Control-Allow-Credentials': true,
                'Access-Control-Allow-Origin': 'http://demopress.xyz' // my domain where I make the ajax request.
            },
            success: function(data, textStatus, jqXHR){
                alert('Successfully Request Send!!');
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('Sorry -- Error');
            }
        });
        e.preventDefault();
        return false;
    });

});

しかし、ajax経由でデータを送信できませんでした。エラーが返されるたびにフォームを送信した後Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.medium.com/v1/users/xxxuserID/posts. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Ajax ヘッダーのスクリーンショット

解決策としてオンラインで見つけたすべてを試しましたが、まだうまくいきません。これを解決しようとしたいくつかの解決策があります。

  1. https://www.html5rocks.com/ja/tutorials/cors/
  2. https://stackoverflow.com/a/3506306/3967385
  3. https://zinoui.c​​om/blog/cross-domain-ajax-request
  4. http://www.ajax-cross-origin.com/
  5. 等

GETREST APIを介して（サーバーからデータを取得する）データにこれらのソリューションを使用した場合、それはGET機能し、トリックを使用しなくても機能します。つまり、別のドメインからデータを取得したい場合は正常に動作しますが、POST/PUTメソッドを使用して新しいデータを作成または別のサーバーに送信すると、動作せず、同じエラーで再生されます。

注: を使用してデータを正常に送信できますphpが、ここでは php とコア JavaScript を使用したくありませんでした。jQuery/ajaxのみを使用してこのタスクを実行したいだけです。

これが私の質問です：

  1. REST API で jquery/ajax のみを使用して別のサーバーを投稿することは可能です (Medium プロファイルに新しい投稿を作成したいなど)
  2. 可能であれば、どのように？少なくともREST APIの例を共有してください
4

2 に答える 2