使用Laravel REST API的Reactjs：请求的资源上没有“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不是很熟悉，我只是得到了这个代码here在我编辑它之前尝试一下。我正在尝试访问我使用Laravel 5.3创建的API，但是我收到错误：

无法加载http://127.0.0.1:8000/api/auth/login：对预检请求的响应未通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，'http://localhost:3000'原产地不允许进入。

错误：XMLHttpRequest.handleError（xhr.js：87）处的createError（createError.js：16）处的网络错误

我已经搜索了答案，他们说我应该使用CORS。我有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)