所以我有一个使用 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 不太熟悉,我刚刚得到了这个代码 here 只是在编辑之前尝试一下。 我正在尝试访问我使用 Laravel 5.3 创建的 API,但收到错误:
Failed to load http://127.0.0.1:8000/api/auth/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:87)
我已经寻找答案,他们说我应该使用 CORS。我有 Laravel CORS。
配置中的我的cors.php
'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 0,
'hosts' => [],
最佳答案
需要对有效负载进行字符串化。
var payload = JSON.stringify({yourdata: yourdata});
并尝试添加这样的标题。
var config = {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
withCredentials: false
}
axios.post(apiBaseUrl, payload, config)
关于javascript - Reactjs 与 Laravel REST API : No 'Access-Control-Allow-Origin' header is present on the requested resource,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52233092/