0

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?

SamHecquet
  • 1,818
  • 4
  • 19
  • 26
Austin Hunter
  • 394
  • 6
  • 22
  • 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 Nov 06 '17 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 Nov 06 '17 at 19:28
  • Possible duplicate of [Chrome Origin null is not allowed by Access-Control-Allow-Origin](https://stackoverflow.com/questions/18945158/chrome-origin-null-is-not-allowed-by-access-control-allow-origin) – aynber Nov 06 '17 at 19:30
  • That error has nothing to do with Laravel and everything to do with javascript. Check the dup question, it should point you in the right direction. – aynber Nov 06 '17 at 19:30
  • I changed my Http Post to `http://localhost:8000` and I am getting the same issue still. – Austin Hunter Nov 06 '17 at 19:33
  • No, you don't need to change your post. You need to change how you're accessing your angularjs file. What is shown in the address bar of your browser? It should start with `http://`, not `file:///` – aynber Nov 06 '17 at 19:35
  • Ah yes, it is showing `file:///` in my browser bar. – Austin Hunter Nov 06 '17 at 19:36
  • try `$http.post("/submit"` .... – Ahmad Mobaraki Nov 06 '17 at 19:42
  • Using Ahmad's example gives me this in errors: `Preflight response is not successful`. I believe aynber is correct. Can someone lead me in the right direction to change my address from `file:///` to `http://`? – Austin Hunter Nov 06 '17 at 19:52
  • 1
    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 Nov 06 '17 at 19:55
  • Amazing. I got it running at: `http://127.0.0.1:8000/index.html` and when I try to post, it is now giving me a `404 Error` in my console log. So it is not finding my server or something. – Austin Hunter Nov 06 '17 at 20:03
  • 1
    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 Nov 06 '17 at 20:09
  • I am getting this in command line: php artisan route:list | | GET|HEAD | / | | Closure | web | | | POST | api/submit | | Closure | api | and I am getting a red submit http post in the network tab – Austin Hunter Nov 06 '17 at 20:12
  • Your route is `/api/submit` not `/submit`, so that's what you should be using in your post request. – aynber Nov 06 '17 at 20:14
  • I am assuming since I am so new to laravel, I have setup my server wrong. I am coming from a Nodejs background. All I have done is add the route to the `api.php` file. – Austin Hunter Nov 06 '17 at 20:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158350/discussion-between-austin-hunter-and-aynber). – Austin Hunter Nov 06 '17 at 20:16

1 Answers1

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.

aynber
  • 22,380
  • 8
  • 50
  • 63