Reactjs with Laravel REST API: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

So I have a project that I am creating with ReactJS. I am trying to Log In, and this is my React Code:

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);
});
}

I am not quite familiar with React and I just got this code here Just trying it out before I edit it. I am trying to access my API which I created with Laravel 5.3 but I get the error:

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)

I have searched for answers and they said that I should use CORS. I have Laravel CORS.

my cors.php in config

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

try this github.com/barryvdh/laravel-cors

rkj
– rkj

2018-09-08 07:39:29 +00:00
Commented Sep 8, 2018 at 7:39 — rkj
– rkj, Commented Sep 8, 2018 at 7:39
I am using that @rkj

eibersji
– eibersji

2018-09-08 07:49:30 +00:00
Commented Sep 8, 2018 at 7:49 — eibersji
– eibersji, Commented Sep 8, 2018 at 7:49

Martin Adiputra · Accepted Answer · 2018-09-08 07:59:37Z

4

need to stringify the payload.

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

and also try to add header like this.

var config = {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  withCredentials: false
}

axios.post(apiBaseUrl, payload, config)

edited Sep 8, 2018 at 7:59

answered Sep 8, 2018 at 7:50

Martin Adiputra

1896 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Adiputra Over a year ago

i update the answers, try to add stringify at payload variable.

eibersji Over a year ago

no need to update, your previous answer worked when I installed the Allow-Control-Allow-Origin:* Extension for Chrome! Thanks!

Collectives™ on Stack Overflow

Reactjs with Laravel REST API: No 'Access-Control-Allow-Origin' header is present on the requested resource

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related