无法使用fetch:React发送POST数据

Question

我正在尝试使用react中的javascript fetch API将POST数据发送到另一个源上的PHP脚本。我有一个CORS策略错误，如下所示：

为了解决上述问题，我在PHP脚本中添加了以下两行代码：

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

但我仍然无法解决我的问题。未发送POST数据。

JS代码：

fetch('http://localhost/articles-mania/publish.php', {
    method: 'POST',
    body: data,  // JSON Object 
    headers : { 
        'Content-Type': 'application/json'
    }
})
.then((res) => res.json())
.then((response) => {
    this.setState({
      responseMsg: response.msg
    })
})

PHP脚本：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

$title = $_POST['article_title'];
echo json_encode(array('msg' => $title));

有什么想法吗？




Answer 1

我刚刚遇到了一个类似的问题，似乎我所有的CORS设置都已正确就位。对我有效的方法是向要传递到body参数中的对象添加一个JSON.stringify（）。

例如。

fetch('http://localhost/articles-mania/publish.php', {
    method: 'POST',
    body: JSON.stringify(data),  // JSON Object 
    headers : { 
        'Content-Type': 'application/json'
    }
})
.then((res) => res.json())
.then((response) => {
    this.setState({
      responseMsg: response.msg
    })
})

Answer 2

也许可以尝试允许用于执行飞行前请求的OPTIONS方法...

更改此项：

header（'Access-Control-Allow-Methods:GET、POST、PUT'）

为此：

header（'Access-Control-Allow-Methods:GET、POST、PUT、OPTIONS'）