Question

我有一个（看似简单的）问题，通过它的REST API将图像上传到Wordpress。现在就是这种情况：

我目前正在我的机器上进行本地开发，因此我正在使用MAMP运行Wordpress。
我在我的应用程序的前端使用React并使用Wordpress REST API作为后端;所以我现在正在运行无头CMS应用程序。
使用Postman，我可以将图像上传到Wordpress。我可以转到Wordpress管理面板，在仪表板中看到实际的图像。我也已经失去了身份验证，我已经在我的应用程序中登录了并且使用Postman传入了JWT令牌。

问题：我使用Axios发出与Postman相同的Post请求，但是我遇到了某种CORS错误而且我不确定如何安全在Wordpress后端启用CORS。

这是我浏览器控制台的确切错误：

无法加载http://localhost:8888/wp-json/wp/v2/media：不允许请求标头字段缓存控制预检响应中的Access-Control-Allow-Headers。

我的AJAX调用（这是在React中并使用Axios）

＆＃13;

onFileChange(event) {
    let files = event.target.files || event.dataTransfer.files;
    if (!files.length) {
        console.log('no files');
    } else {
      axios.post('http://localhost:8888/wp-json/wp/v2/media', files, {
        headers: {
          'content-type': 'image/png',
          'content-disposition': 'attachment; filename=testImageNum2.png',
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
          'cache-control': 'no-cache',
        }
      })
    }
  }

  render() {
    return (
      <div>
        <Header />
        <h2>Upload A File Here:</h2>
        <input id="file_selector" type="file" name="file" onChange={this.onFileChange} />
      </div>
    )
  }

＆＃13;

目前，WP REST API似乎没有太多关于此主题的信息。如果有人能帮助阐明这个话题，我将非常感激！

Answer 1

错误表明您的客户端（axios）正在发送具有“缓存控制”标头（'cache-control': 'no-cache',）的请求，但缓存控制不在Apache的Access-Control-Allow-Headers允许标头列表中。将“cache-control”添加到该列表或在axios中禁用它。

WordPress Rest API图片上传CORS问题

1 个答案: