Question

在这里，我尝试使用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

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

https://www.html5rocks.com/en/tutorials/cors/
https://stackoverflow.com/a/3506306/3967385
https://zinoui.com/blog/cross-domain-ajax-request
http://www.ajax-cross-origin.com/
ETC

当我通过REST API将这些解决方案用于GET（从服务器检索数据）数据时，它的工作和GET工作而不使用任何技巧。意味着如果我想从另一个域检索数据它可以正常工作但是当我使用POST/PUT方法创建新数据或将新数据发送到另一台服务器时，它无法正常工作并重播同样的错误

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

这是我的问题：

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

Answer 1

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

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

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

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

Answer 2

尝试一下：

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;
}

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

2 个答案: