在ajax rest api post方法上阻止了交叉原始请求

时间:2016-10-21 00:57:06

标签: jquery ajax api medium.com

在这里,我尝试使用Medium从我的WordPress前端表单在Medium API个人资料中创建新帖子。

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 Header Screenshot

我尝试了我在网上找到的所有解决方案,但没有运气。以下是我试图解决的一些解决方案。

  1. https://www.html5rocks.com/en/tutorials/cors/
  2. https://stackoverflow.com/a/3506306/3967385
  3. https://zinoui.com/blog/cross-domain-ajax-request
  4. http://www.ajax-cross-origin.com/
  5. ETC
  6. 当我通过REST API将这些解决方案用于GET(从服务器检索数据)数据时,它的工作和GET工作而不使用任何技巧。意味着如果我想从另一个域检索数据它可以正常工作但是当我使用POST/PUT方法创建新数据或将新数据发送到另一台服务器时,它无法正常工作并重播同样的错误

      

    注意:我可以使用php成功发送数据,但我不想这样做   在这里使用PHP和核心JavaScript。我只想使用jQuery / ajax完成此任务。

    这是我的问题:

    1. 可以仅使用带有REST的jquery / ajax发布另一台服务器 API(就像我想在我的中型材上创建一个新帖子)
    2. 如果可能的话怎么样?请至少与REST分享一个例子 API

2 个答案:

答案 0 :(得分:0)

服务器必须使用Allow-Control-Allow-*标头而不是您的网络应用程序进行响应。

Access-Control-Allow-Origin : https://www.yourowndomain.com

当浏览器未从服务器收到上述标题时,浏览器将阻止请求。

我没有使用Medium的经验,但我相信您的帐户尚未获得对其API的访问权限。

答案 1 :(得分:0)

尝试一下:

add_filter( 'wp_headers', 'send_cors_headers', 11, 1 );
function send_cors_headers( $headers ) {
    $headers['Access-Control-Allow-Origin'] = $_SERVER[ 'HTTP_ORIGIN' ];
    return $headers;
}

请注意,这将允许从任何源进行访问。为了安全起见,您应该尝试进行一些操作,例如设置一组可以向WordPress网站发出请求的允许域,如果发出请求的域不在允许列表中,则将允许CORS短路:

add_filter( 'wp_headers', 'send_cors_headers', 11, 1 );
function send_cors_headers( $headers ) {
    $allowed_domains = array( 'https://my.okdomain.com' , 'http://anothergoodone.com');
    if ( ! in_array( $_SERVER[ 'HTTP_ORIGIN' ] , $allowed_domains ) ) return $headers;
    $headers['Access-Control-Allow-Origin'] = $_SERVER[ 'HTTP_ORIGIN' ];
    return $headers;
}