Reactjs with Laravel REST API：请求的资源上不存在'Access-Control-Allow-Origin'标头

Question

所以我有一个用ReactJS创建的项目。 我正在尝试登录，这是我的 React 代码：

handleClick(event){
var apiBaseUrl = "http://127.0.0.1:8000/api/auth/login";
var self = this;
var payload={
"email":this.state.email,
"password":this.state.password
}
axios.post(apiBaseUrl, payload)
.then(function (response) {
console.log(response);
if(response.data.code == 200){
console.log("Login successfull");
var uploadScreen=[];
uploadScreen.push(<UploadScreen appContext={self.props.appContext}/>)
self.props.appContext.setState({loginPage:[],uploadScreen:uploadScreen})
}
else if(response.data.code == 204){
console.log("Username password do not match");
alert("username password do not match")
}
else{
console.log("Username does not exists");
alert("Username does not exist");
}
})
.catch(function (error) {
console.log(error);
});
}

我对 React 不太熟悉，我刚刚在这里得到了这段代码 只是在我编辑它之前尝试一下。 我正在尝试访问我用Laravel 5.3创建的API，但出现错误：

无法加载 http://127.0.0.1:8000/api/auth/login：响应 预检请求未通过访问控制检查：否 "访问控制允许源"标头存在于请求的上 资源。因此不允许使用原产地"http://localhost:3000" 访问。

错误：网络错误 at createError (createError.js：16( at XMLHttpRequest.handleError (xhr.js：87(

我已经搜索了答案，他们说我应该使用CORSs。我有Laravel CORS。

我在配置中的cors.php

'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 0,
'hosts' => [],

Answer 1

需要字符串化有效负载。

var payload = JSON.stringify({yourdata: yourdata});

并尝试像这样添加标题。

var config = {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
withCredentials: false
}
axios.post(apiBaseUrl, payload, config)