Angular frontend cant reach Laravel API (port issues) - php

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.

Related

Call php file via axios requert has been blocked by CORS policy in VUE CLI 3

I'm calling php file via axios get method in vue cli 3.
my servers: node js and wamp server
My app (node) path http://localhost:8080/ &
my WAMP path http://localhost:80.
Now I got has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource and I saw https://cli.vuejs.org/config/#devserver-proxy but it's not working for me.
In my vue.config.js
module.exports = {
devServer: {
proxy: 'http://localhost/'
}
}
and my PHP file path in the views folder
http://localhost:80/blog/src/views/php/imageUpload.php
I need to know where I did mistake.
This is the error I'm getting:
And this is my code:
The CORS mechanism is used to enforce the client requests are coming from applications belonging to the same domain as the domain at which the server is deployed by default.In other words, it is to ensure that our own applications are only applications that access our API and to prevent applications belonging to other domains to access it. In your case, the Client application and Server application are using different ports. That breaks the rule
The requests are initiated from application running at 8080 to the server API running at 80, though they are running in the same localhost.The port differs. That's why the CORS errors are thrown.
Please set the header Access-Control-Allow-Origin to localhost:8080 in the your PHP application to allow the cross domain requests.
Please read the Functional overview of CORS mechanism here

apache2/php container running behind reverse proxy not respecting forwarded port and proto in redirects?

I am using a modified version of the official docker library php:7.0.30-apache image behind a reverse proxy (traefik).
The modifications include an alteration of apache2 default serving port 80 to port 1025. (openshift won't allow root operations like opening ports inside a docker container below 1024)
Now when using redirects inside the container apache2 ignores the HTTP_X_FORWARDED_PORT header and redirects to the correct hostname with port 1025 added.
Example:
The application runs at http://www.app.com (port 80) publicly, internally at http://app.local:1025 and when doing header("Location: web"); it redirects to http://www.app.com:1025/web instead of http://www.app.com/web
I also noticed the following behavior: When using .htaccess files to redirect to https browsers display a "too many redirects error" because both HTTP_X_FORWARDED_PORT and HTTP_X_FORWARDED_PROTO are ignored.
What do I need to do for .htaccess and php header("Location: xyz"); redirects work and respect forwarded headers behind a reverse proxy?
I do understand that this is the correct behavior for the request coming from the reverse proxy to the apache host, I just need to configure apache2 to react to the request that was made to the reverse proxy instead.

ProxyPass Failed: Error during WebSocket handshake: Unexpected response code: 500

I have written a WebSocket Server on PHP/Apache. I made the WebSocket Secure using mod_proxy_wstunnel.
So, a user connects with WSS://socket.domain.com and the request is redirected to the (WS) protocol, e.g: ws://10.21.55.2:12345/
I'm using proxy pass just because the page is loaded over HTTPS and WwebSocket is on WS protocol.
here is how I redirect WSS ==> WS for socket.domain.com
ProxyPass / ws://10.21.55.2:12345
but the above code is giving 500 Internal Server Error. I dont know why its so. It was working before I rebooted the system.
here is the error log
AH01144: No protocol handler was valid for the URL /. If you are using a DSO version of mod_proxy, make sure the proxy submodules are included in the configuration using LoadModule.
You might need to add the mod proxy_wstunnel
a2enmod proxy_wstunnel

Does Apache pass to PHP whether the port (:80) was explicitly requested?

It doesnt matter whether a resource was requested via mydomain.com OR mydomain.com:80(which is how some bots/spiders make requests): HTTP_HOST always shows up as 'mydomain.com' and there is no way for PHP to know whether the request included a :80 (2). This leads me to believe that Apache passes the exact same request to PHP whether the port is specified or not (an it makes sense).
The problem: I have the NewRelic PHP agent installed on this machine, and it reports to the NewRelic service, via a PHP auto_prepend_file used to name the applications separately(1), both mydomain.com and mydomain.com:80. These two are the same application showing up under two different names in NewRelic control panel, which is undesirable. Since the application name is set via PHP, how could mydomain.com:80 possibly be passed to the NewRelic API when the code setting the name can't even see whether the request explicitly defines :80? NewRelic support tells me that my code is passing the :80 to their API, and that's just not possible(2). Does Apache pass to PHP whether the port (:80) was explicitly requested or not?
1) if I don't use this file, every vhost on the server will report under the same generic 'PHP Application' name
2) SERVER_PORT will always be 80, whether explicitly invoked or not (unless of course it's an https or non standard port request, which is not what's being discussed here). In other words, I cannot use SERVER_PORT to filter requests that have the port explicitly defined because whether the request does or does not have an explicitly defined port is invisible to PHP.
Apache 2.2.15, mod_fcgid 2.3.7, PHP 5.3.3, Linux 2.6.32.60-40 x64, CentOS 6.4
HTTP_HOST is literally just the hostname, e.g. www.example.com, of the site you're accessing. If you want the port number that the request came in to, then there's $_SERVER['SERVER_PORT']
Browsers AND curl will strip the :80 from the host header when the port requested is the standard (port 80). Since I had not tested using a manually issued GET, I didn't see how could $_SERVER['HTTP_HOST'] include a port number. I found that it does, WHEN the port is included in the Host header (which makes sense, since the manual specifies that $_SERVER['HTTP_HOST'] is "Contents of the Host: header from the current request, if there is one.")
Section 14.23 of the HTTP spec states that the port # should be included in a request IF its not the default port of 80. But it doesn't say whether it's OK or not to include the port number when the port used IS the default.
In my case, the requests that do include the port number, even when using the default port, came from the Baidu Spider.
If you need to see this by yourself, you need to issue a manual GET request. Use Netcat or Telnet to send these commands:
$ telnet www.host.com 80
GET /host.php HTTP/1.1
Host: www.host.com:80
Connection: close
(add two CRLFs at the end)

Setting up haProxy to content switch multiple apps on Appfog

I currently have two apps at AppFog, they are.
http://sru-forums-prod.aws.af.cm/ and http://sru-home-prod.aws.af.cm/
I have haProxy running locally on my computer, this is my current config file.
global
debug
defaults
mode http
timeout connect 500ms
timeout client 50000ms
timeout server 50000ms
backend legacy
server forums sru-forums-prod.aws.af.cm:80
frontend app *:8232
default_backend legacy
The end-goal is that localhost:8232 forwards traffic to sru-home-prod, while localhost:8232/forums/* forwards traffic to sru-forums-prod. However I cant even get a simple proxy up and running.
When I run HAProxy off this config file I receive AppFog 404 Not Found at localhost:8232.
What am I missing, is this even possible?
EDIT:
New config works but now i have a port 60032 coming back in the response.
global
debug
defaults
mode http
timeout connect 500ms
timeout client 50000ms
timeout server 50000ms
backend legacy
option forwardfor
option httpclose
reqirep ^Host: Host:\ sru-forums-prod.aws.af.cm
server forums sru-forums-prod.aws.af.cm:80
frontend app *:8000
default_backend legacy
The reason you are getting an AppFog 404 Not Found is because applications hosted on AppFog are routed by domain name. In order for AppFog to know what app to serve you, the domain name is required to be in the HTTP request. When you go to localhost:8232/forums/ it sends localhost as the domain name which AppFog does not have as a registered app name.
There is a good way to get around this issue
1) Map your application to a second domain name, for example:
af map <appname> sru-forums-prod-proxy.aws.af.cm
2) Edit your /etc/hosts file and add this line:
127.0.0.1 sru-forums-prod-proxy.aws.af.cm
3) Go to http://sru-forums-prod-proxy.aws.af.cm:8232/forums/ which will map to the local machine but will go through your haproxy successfully ending up with the right host name mapped to your app hosted at AppFog.
Here is a working haproxy.conf file that demonstrates how this has worked for us so far using similar methodologies.
defaults
mode http
timeout connect 500ms
timeout client 50000ms
timeout server 50000ms
backend appfog
option httpchk GET /readme.html HTTP/1.1\r\nHost:\ aroundtheworld.appfog.com
option forwardfor
option httpclose
reqirep ^Host: Host:\ aroundtheworld.appfog.com
server pingdom-aws afpingdom.aws.af.cm:80 check
server pingdom-rs afpingdom-rs.rs.af.cm:80 check
server pingdom-hp afpingdom-hp.hp.af.cm:80 check
server pingdom-eu afpingdom-eu.eu01.aws.af.cm:80 check
server pingdom-ap afpingdom-ap.ap01.aws.af.cm:80 check
frontend app *:8000
default_backend appfog
listen stats 0.0.0.0:8080
mode http
stats enable
stats uri /haproxy

Categories