启用CORS以通过URL获取内联SVG

时间：2018-09-03 作者：Petr Cibulka

太长，读不下去了有没有办法在我的WordPress后端为SVG启用CORS，这样我就可以通过http请求将它们发送到其他域？理想情况下无需触摸.htaccess?

我的目标是建立一个无头WordPress/React网站。我想让我的SVG上传到WP后端，内联到我的前端代码中（这样我就可以访问它们的DOM）。

我有SVG的URL，并且react-inlinesvg 库允许我内联它。我正在No \'Access-Control-Allow-Origin\' header is present on the requested resource. 但出现错误。react-inlinesvg 通过发出实际http请求httpplease图书馆

我刚开始尝试的是，我必须启用SVG上传到管理员。

add_filter(\'upload_mimes\', function($mimes) {
    return array_replace($mimes, [
        \'svg\' => \'image/svg+xml\',
        \'svgz\' => \'image/svg+xml\'
    ]);
});
我也找到了这些过滤器，但我认为如果通过http请求文件，不会触发这些过滤器：

add_action(\'rest_api_init\', function($wp) {
    remove_filter( \'rest_pre_serve_request\', \'rest_send_cors_headers\' );
    add_filter( \'rest_pre_serve_request\', function( $value ) {
        header( \'Access-Control-Allow-Origin: *\' );
        header( \'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE\' );
        header( \'Access-Control-Allow-Credentials: true\' );
        return $value;
    });
});

add_filter(\'wp_headers\', function($headers) {
    $headers[\'Access-Control-Allow-Origin\'] = \'*\';
    return $headers;
});
提前谢谢！

1 个回复
SO网友:Petr Cibulka

通过使用自定义rewrite_url, 我能够劫持该请求并设置其CORS友好的标题。

class Cors_Media {

    const QUERY_VAR = \'cors_media_id\';

    public function init() {
        add_action(\'init\', [$this, \'add_rewrite_rule\']);
        add_filter(\'query_vars\', [$this, \'query_vars\']);
        add_action(\'template_redirect\', [$this, \'template_redirect\']);
    }

    public function query_vars(array $qs) {
        $qs[] = \'cors_media_id\';
        return $qs;
    }

    public function add_rewrite_rule() {
        add_rewrite_rule(
            \'^cors_media_id/([0-9]+)/?\',
            \'index.php?cors_media_id=$matches[1]\',
            \'top\'
        );
    }

    public function template_redirect() {
        $att_id = get_query_var(\'cors_media_id\');
        if (empty($att_id)) { return; }
        $url = wp_get_attachment_url($att_id);
        if ($url) {
            $this->show_file($url);
        }
        exit;
    }

    protected function show_file($url) {
        header(\'Access-Control-Allow-Origin: *\');
        echo file_get_contents($url);
        exit;
    }

}

$obj = new Cors_Media;
$obj->init();

结束
标签： headers   http   svg   小码农  

相关推荐

使用任何插件都会导致http 500错误(且仅限插件)

我正在一个以前由其他人创建的网站上工作。每当我尝试使用插件（例如Dropbox Backup&Restore、Reset WP）时，都会出现http 500错误。[我使用filezilla进行了备份。]using any plugin results in http 500 error (and only plugins)故障排除-htacces。bak（ftp）x-PHP内存限制（ftp）x-插件故障x-文件夹权限（ftp）x-损坏的核心文件（ftp）x-主机端问题-contactedI am at a