Angular frontend cant reach Laravel API (port issues)
<p>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 <code>localhost:8000/login</code> (authentication) but as my front end runs on port 3000 it just can't reach it.</p>

<p>Here's how I start my servers:</p>

<p><code>node server</code> (starts on port 3000)</p>

<p><code>php artisan serve</code> (optionally setting port by <code>--port=8000</code></p>

<p>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?</p>

<p><strong>Update:</strong></p>

<p>When running both servers on the same port I get the error message from google chrome console: </p>

<blockquote>
  <p>angular.js:11756 POST <a href="http://localhost:3000/localhost/login" rel="nofollow">http://localhost:3000/localhost/login</a> 404 (Not Found)</p>
</blockquote>

<p>When running frontend on port 3000 and API on 8000 I get this:</p>

<blockquote>
  <p>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.</p>
</blockquote>

<p>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. </p>

<p>One other thing I tried is putting <code>http://</code> before the url, then I get this error: </p>

<blockquote>
  <p>angular.js:11756 POST <a href="http://localhost:8000/login" rel="nofollow">http://localhost:8000/login</a> (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 <a href="http://localhost:8000/login" rel="nofollow">http://localhost:8000/login</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a>' is therefore not allowed access. The response had HTTP status code 405.</p>
</blockquote>