Access-Control-Allow-Origin' header is present error on angular laravel app

Question

I have written simple code for angular as frontend and laravel as backend. I have code in my controller like:

PostController.php

public function store(Request $request)
{
   Post::create([
        'post_name'=>$request->post_name,
        'post_text'=>$request->post_text,

    ]);
    return response()->json(['msg'=>'Post Created','success'=>true]);
}

and in my routes.php file, I have:

Route::group([
    'middleware' => ['cors'],
], function ($router) {
     //Add you routes here, for example:
Route::resource('post','API\PostController');  
});

and in angular post.service.ts

addPost(data) {
      const headers = new HttpHeaders({
        'Accept': 'application/json',
        'Content-Type':'application/json'
      });
      let postdata={
        'post_name':data['post_name'],
        'post_text':data['post_text']
      };
      console.log(postdata);
      return this.http.post('http://192.168.1.100/crud/api/post',postdata,{ headers: headers });
  }

and after execution, I am getting an error like:

Failed to load http://192.168.1.100/crud/api/post: 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:4200' is therefore not allowed access.

The preflight request is made using the OPTIONS request method, so you need to set up your server to handle that as well - right now, you are _only_ handling POST requests. — misorude, Sep 25 '18 at 11:44
https://stackoverflow.com/questions/33076705/laravel-5-1-api-enable-cors — Chellappan வ, Sep 25 '18 at 11:50
Where's the CORS middleware coming from? Is it configured on any origin? — apokryfos, Sep 25 '18 at 12:38

score 0 · Answer 1 · answered Sep 25 '18 at 11:53

This may be due to,

Your request has been rejected by the server. (If is it so then you must enable cross origin in server side )
Your request has some issues.

related to your scenario try, Passing Access-Control-Allow-Origin: * next to content type in your json and check the server configuration.

score 0 · Accepted Answer · answered Sep 26 '18 at 04:11

0

solved this problem by just adding chrome extension Moesif Origin & CORS Changer

answered Sep 26 '18 at 04:11

Pranav Mandlik

644
6
19
45

Access-Control-Allow-Origin' header is present error on angular laravel app

2 Answers2