Wordpress REST API - 来自 Chrome 扩展的通话后答案

【问题标题】：Wordpress REST API - Post Call from a Chrome ExtensionWordpress REST API - 来自 Chrome 扩展的通话后
【发布时间】：2020-05-17 02:28:43
【问题描述】：

我开发了一个 chrome 扩展程序，我想使用 REST API 将来自 chrome 扩展程序的一些数据存储到我的 wordpress 网站。

我有两个问题：

第一个是我有一个错误，这与两个不同域之间存在交互的事实有关：“从源 'chrome-extension://hafjgepbbnbjcmmkealkikdjlmojdlkf' 访问 'https://groupio.fr/wp-json/groupio/v1/ean/' 处的 XMLHttpRequest已被 CORS 政策阻止：对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin”标头包含无效值“”。”
第二个问题是，从我的 Wordpress 网站运行 php 函数后，我无法将值返回给我的 chrome 扩展。

这是我的 Chrome 扩展程序的 background.js 文件中的 REST API 调用：

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){

        jQuery.ajax({

        type:"POST",
        url: "https://groupio.fr/wp-json/groupio/v1/ean/",
        contentType: 'applcation/json',

        data : {
            ean: "1234567889",
            type: "Product Code"
        },

        success:function(data){

            alert(data);
        },

        error: function(errorThrown){
            console.log(errorThrown);
        }
        });

});

这是我主题的 function.php 中的新端点和 Rest API 回调函数（如您所见，我只想返回确切的值而不处理任何内容） - 它不起作用：

function my_awesome_func( $data ) {

    return $data['ean'];
}

add_action( 'rest_api_init', function () {
  register_rest_route( 'groupio/v1', '/ean/', array(
    'methods' => 'POST',
    'callback' => 'my_awesome_func',
  ) );
} );

【问题讨论】：

谁能帮我解决这个问题？

标签： ajax wordpress google-chrome-extension wordpress-rest-api

【解决方案1】：

Access-Control-Allow-Origin 设置为空白，因为请求不是从受支持的协议发送的。目前 WordPress 正在针对这些项目验证此列表：

$protocols = array( 'http', 'https', 'ftp', 'ftps', 'mailto', 'news', 'irc', 'gopher', 'nntp', 'feed', 'telnet', 'mms', 'rtsp', 'sms', 'svn', 'tel', 'fax', 'xmpp', 'webcal', 'urn' );

好消息是您可以通过“kses_allowed_protocols”过滤器对此列表进行更改。因此，在您的 WordPress 插件或函数文件中，添加以下内容以添加对“chrome-extension”的支持

add_filter( 'kses_allowed_protocols', function ( $protocols ) {
    $protocols[] = 'chrome-extension';
    return $protocols;
} );

这应该允许标题得到正确设置。我认为一旦完成，您将从 API 中获得一些结果。

【讨论】：