访问控制允许源"标头存在于请求的资源上

Question

Am字符串将数据从React.js发布到localhost insert.php文件。当我从reactjs提交表单时，它在控制台上给了我错误。错误是：

1. 访问'XMLHttpRequesthttp://localhost/reactphpdemo/connect.php'来自原点'http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在"access control Allow Origin"标头

xhr.js:177 POSThttp://localhost/reactphpdemo/connect.phpnet:：ERR_FAILED

createError.js:16未捕获(承诺中(错误：createError处的网络错误(createError.js:16(XMLHttpRequest.handleError(xhr.js:84(

这是我的代码

import React, { Component } from 'react';
import axios from 'axios';
export default class Insert extends Component {
constructor(props){
super(props);
this.onSubmit = this.onSubmit.bind(this);
this.state={
first_name:'',
last_name:'',
email:''
}
}
onSubmit(e){
e.preventDefault();
const obj = {
headers:{'Access-Control-Allow-Origin':'*'},
first_name:this.state.first_name,
last_name:this.state.last_name,
email:this.state.email,
};
axios.post('http://localhost/reactphpdemo/insert.php',obj).then(res=>console.log(res.data));
this.setState({
first_name:'',
last_name:'',
email:''
})
}
render() {
return (
<form onSubmit={this.onSubmit}>
<div class="form-group">
<input type="submit" value="Register User" class="btn btn-primary" name="name" />
</div>
</form>
)   
}

Answer 1

只需将这些添加到你的.php文件中，它就可以完成任务：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: 'X-Requested-With,content-type'");
header("Access-Control-Allow-Methods: 'GET, POST, OPTIONS, PUT, PATCH, DELETE'");

或者你可以使用Chrome插件，比如Moesif Origin&CORS转换器