Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/studentpost' from origin 'http://localhost:8100' has been blocked by CORS policy:

Question

ı want to make auth in ionic 3 with laravel api.

when ı click sigup button my signup info is inserted database very vell. but it doesnt go another page , just inserted to database. And ı face this error .

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/studentpost' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

And facing this warning : Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/api/studentpost with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

signup.ts

export class SignUpPage {
  responseData : any;
  userData = {"full_name":"", "password":"","email":"","name":""};

  signup() {
    if(this.userData.full_name && this.userData.password && this.userData.email && this.userData.name){
      //Api connections
    this.authProvider.postData(this.userData, "signup").then((result) =>{
    this.resposeData = result;
    if(this.resposeData.userData){
      console.log(this.resposeData);
      localStorage.setItem('userData', JSON.stringify(this.resposeData) )
      this.navCtrl.push(HomePage);
    }
    else{
      this.presentToast("Please give valid username and password");
    }

    }, (err) => {
      console.log("this error: "+ JSON.stringify(err));
    });
  }
  else {
    console.log("Give valid information.");
  }

  }

service provider

postData(credentials, type){

    return new Promise((resolve, reject) =>{
      let headers = new Headers({
        'Content-Type' : 'application/json'
      });
      let options = new RequestOptions({ headers: headers });



    this.http.post(apiUrl, JSON.stringify(credentials), {headers: headers}).
      subscribe(res =>{
        resolve(res.json());
      }, (err) =>{
        reject(err);
      });

    });

for give information; my signup info is inserted into database ı can see info in json but ı am facing above errors.

Its HTTP header issue. You may find the idea here. https://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains — Milan Chandro, Aug 08 '19 at 11:43

score 0 · Answer 1 · answered Aug 08 '19 at 12:07

0

If you want a simply solution, use the laravel-cors package found here.

If you don't want to read through it, use composer require barryvdh/laravel-cors command to install it then add

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

in your app/Http/Kernel.php

answered Aug 08 '19 at 12:07

Courtney White

612
8
22

its worked for auth ( for post method) but now ı am getting error like when ı use get method for other things and get methods was working very well before this. now ı am getting this error like this when ı made get method – B.T Aug 08 '19 at 13:17
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/lessons' from origin 'http://localhost:8100' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:8100', but only one is allowed. – B.T Aug 08 '19 at 13:18

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/studentpost' from origin 'http://localhost:8100' has been blocked by CORS policy:

1 Answers1