I am using nodejs for serving my angular application, and artisan for my laravel API. I would like to let the angular app communicate with the API, but I can't make it work. As far as I know, I can't run both on the same port, as only one app can be run on a port, however, I can't run them on different ports because then my front end app would not be able to send request to the API. I tried to send the request to the server by localhost:8000/login
(authentication) but as my front end runs on port 3000 it just can't reach it.
Here's how I start my servers:
node server
(starts on port 3000)
php artisan serve
(optionally setting port by --port=8000
Is this way even right? I'm new to this kind of concept. What would be the best practice for reaching the API from the frontend?
Update:
When running both servers on the same port I get the error message from google chrome console:
angular.js:11756 POST http://localhost:3000/localhost/login 404 (Not Found)
When running frontend on port 3000 and API on 8000 I get this:
angular.js:11756 XMLHttpRequest cannot load localhost:8000/login. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
If I don't define the port for the request it uses the same as the server running on (this case port 3000). If I specify the port I get the error above.
One other thing I tried is putting http://
before the url, then I get this error:
angular.js:11756 POST http://localhost:8000/login (anonymous function) @ angular.js:11756sendReq @ angular.js:11517serverRequest @ angular.js:11227processQueue @ angular.js:15961(anonymous function) @ angular.js:15977Scope.$eval @ angular.js:17229Scope.$digest @ angular.js:17045Scope.$apply @ angular.js:17337(anonymous function) @ angular.js:25023defaultHandlerWrapper @ angular.js:3456eventHandler @ angular.js:3444 :3000/#/login:1 XMLHttpRequest cannot load http://localhost:8000/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.