FILEEM

POWER OF DREAM

调用wordpress rest api 提示 has been blocked by CORS policy 的终极解决办法

wordpress是一个功能强大的cms,提供了完整的rest api供app等调用。这两天折腾react,调用rest api老是提示:

Access to fetch at 'http://wordpress' from origin 'http://127.0.0.1:9090' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

然后获取不到数据。
但通过浏览器和postman请求,都不存在获取不到数据的问题。
我以为是react写的有问题,折腾半天,最后用排除法,另外写了一个json数据格式和wp一摸一样的给react调用,就没问题。
然后我又以为是reset api有问题,好吧,我又单独用写插件的形式写了一个json格式的输出格式假装API给react调用。

<?php /* Template Name: API文章列表 */ ?>
{"result":[
<?php query_posts('cat=27&showposts=5'); //cat是要调用的分类ID,showposts是需要显示的文章数量 ?>
<?php 
$i=1;
while (have_posts()) : the_post(); ?>
["<?php the_permalink(); ?>","<?php the_title(); ?>","<?php the_date(); ?>"]
<?php if ($i<"5") { echo ","; } ?>
<?php $i ++;endwhile; wp_reset_query(); ?>
]}

依然报错。

这下确定问题是出在wordpress而不是react,在wordpress源码中搜索cors_headers,发现wp-includes/rest-api.php第588行:

header( 'Access-Control-Allow-Origin: ' . $origin );

这里限制了请求来源。

将其改为:

header( 'Access-Control-Allow-Origin: *');

即可实现从任何地方获取API。

《调用wordpress rest api 提示 has been blocked by CORS policy 的终极解决办法》

点赞