Http Post from AngularJS to Laravel

Question

I have been doing research and nothing I have found has made any sense to me. I am totally new to laravel and I am wanting to use it as a backend to my AngularJS. I have good experience with angular so here is my controller function making the http call:

var jsonData = {
  text: "test"
};
$http.post("http://127.0.0.1:8000/submit", {
  data: jsonData
}).then(function(response) {
  console.log("SUCCESS");
})

And then here is my route in file api.php:

Route::post('/submit', function(Request $request) {
  $data = $request->input('data');
  return $data;
});

So then I run php artisan serve and the console says Laravel development server started: <http://127.0.0.1:8000>. I try to reach the server via angular and nothing happens. I was wondering if someone can help me figure out what I am doing wrong? How can I post my data from angular to laravel and then send it back to my angular?

Can you access the server with the address yourself? Is it running inside of a VM such as vagrant? Do you receive any sort of response at all? Watch the network tab in your browser console along with the console tab, and see what happens there. — aynber
– aynber, Commented Nov 6, 2017 at 19:26
I can access http://127.0.0.1:8000 in my browser and the Laravel template shows up. It is running just via my terminal. I get no response. In the console of my angular site: [Error] Origin null is not allowed by Access-Control-Allow-Origin. [Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. [Error] XMLHttpRequest cannot load http://127.0.0.1:8000/submit due to access control checks. So I installed: composer require barryvdh/laravel-cors still no success — Austin Hunter
– Austin Hunter, Commented Nov 6, 2017 at 19:28
Possible duplicate of Chrome Origin null is not allowed by Access-Control-Allow-Origin — aynber
– aynber, Commented Nov 6, 2017 at 19:30
You'll have to run the angularjs file within a web server. You can use Laravel's Homestead VM to run multiple domains, and place the angularjs file there. Or you can place the angularjs files within your /public directory of your laravel installation, and you can access it as http://127.0.0.1:8000/angularjs-filename.html. I'm currently running angularjs within laravel, you just need to have the file structures correct. — aynber
– aynber, Commented Nov 6, 2017 at 19:55
It's finding the server, but the server isn't finding the path. I'd say watch the network tab and try php artisan route on the command line to make sure that the two match. — aynber
– aynber, Commented Nov 6, 2017 at 20:09

aynber · Accepted Answer · 2017-11-06 20:40:29Z

1

So this came down to a few issues:

1) Chrome does not like pages to be accessed via the file. It needs to run within a webserver. Luckily, Laravel works well with angularjs when the angularjs files are placed inside of the public/ folder.

2) Since the route was placed into api.php, the actual route to the file was api/submit.

answered Nov 6, 2017 at 20:40

aynber

23.2k9 gold badges57 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Http Post from AngularJS to Laravel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest