Local Angular's proxy to local api can't connect - php

I'm having trouble getting my local dev server of an Angular app to connect to my local PHP server of my api.
It's pretty much exactly the same problem expressed in this question:
ECONNREFUSED for proxy request from localhost to another localhost
Imagine the following:
/api (PHP API source)
/myapp (angular app)
I run the following in /api:
php -S localhost:8000
Then, in /myapp, I run the following:
ng serve
In my app, I have the following proxy.conf.json:
{
"/api.php/v1/User": {
"target": "http://localhost:8000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
/api/api.php is the main entrypoint for all api calls. I then use the rest of the address to identify the correct call, prepended by /v1/User.
I've confirmed that the API runs fine by it's self. But when accessing the app in the browser the following errors occur:
[HPM] POST /api.php/v1/User/Auth -> http://localhost:8000
[HPM] Error occurred while trying to proxy request /api.php/v1/User/Auth from localhost:4200 to http://localhost:8000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
No errors are received on the PHP server side, which leads me to believe the proxy isn't even talking to the PHP server.

Related

I can not be accessing to files of 'domains' directory in openserver with ngrok for setting webhook for telegram bot in windows

Before using windows I was Ubuntu User. When I used ngrok on ubuntu, It automatically accesses to /var/www/html directory, afetr this I can easily open php file which telegram bot codes to see result.
Now on Windows, I am using openserver. Openserever domains directory for php files like /var/www/html in ubuntu.
I installed ngrok.exe. when I type ngrok.exe http 80 on cmd. I am gettin gall thins correctly:
Web Interface http://127.0.0.1:4040
Forwarding http://5756c0888da3.ngrok.io -> http://localhost:80
Forwarding https://5756c0888da3.ngrok.io -> http://localhost:80
But when with it I can not be accessing to domains.
I tried this command also:ngrok.exe http halalBot.test:80 to connect my project directly.
Web Interface http://127.0.0.1:4040
Forwarding http://40b6091d262f.ngrok.io -> http://halalBot.test:80
Forwarding https://40b6091d262f.ngrok.io -> http://halalBot.test:80
However, when I tried to see url http://40b6091d262f.ngrok.io on browser, this url is not for http://halalBot.test:80, namely this project is not being opened on browser, but opening localhost page which is not localhost page of openserver.
Please if someone know how to access to 'domains' directory with ngrok for setting webhook for Telegram bot!
I need to specify the --host-header parameter so that the server receives the Host header for the correct processing of the request:
ngrok http --host-header=halalBot.test 80

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

Angular frontend cant reach Laravel API (port issues)

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.

Angular $http PUT requests return status -1

I have a PHP REST API running on Apache2 Webserver inside an Ubuntu machine.
I'm trying to send PUT requests to my server with no success.
When I'm sending the request inside my localhost (same origin) - it works.
When I'm sending the request on my Docker containers (same origin) - it works.
When I'm sending the request from my Angular client to the server in development environment (cross-origin) - I received a weird status -1 error in the return of the request.
From sending the request from PostMan Chrome Extension - it works perfectly, but I see nothing special in its request headers.
This is my code for sending the request:
return $http.put(path, params).then(successCallback, errorCallback);
This is a picture of the returned status:

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