Make request to php endpoint in angular4 - php

So i am new to Angular4, I have a service that is supposed to make a request to a php api. I have the following code -
getWeather(keyword: string){
return this.http.get("weather.php", {
params: new HttpParams().set('keyword', keyword),
headers: new HttpHeaders().set('Method', 'search'),
});
I am getting a 404 localhost:4200/weather.php cannot be found. not sure wher to place the php endpoint file.

Assuming that localhost:4200 is your front-end server, you have to set your php server api path in the call. If your php server in in local on the 8080 port, you type this.http.get('http://localhost:8080/weather.php',...

You can put it in your src/assets folder and then call it using this.http.get("assets/weather.php", {....

This is because for Angular application is hosted on 4200 port and your PHP file will be using port 80.
Try using
http://localhot/path/to/weather.php

Related

Wordpress REST API Issue

I'm currently trying to wrap my head around Wordpress and its relation to the REST API. All of theses issues are only occurring in the context of plugin development. So far I had setup my endpoint and written my callback which will be executed whenever someone is sending a GET-Request to said endpoint. However, my callback is never called. This is the file which I've written so far.
/*
* Plugin Name: cola-learning
*/
if(!defined('ABSPATH')){
die;
}
if(!function_exists('add_action')){
echo 'You cant access this ressource!';
exit;
}
function PrintRESTResponse()
{
return rest_ensure_response("student");
}
function SetupREST()
{
return register_rest_route("student/v1","/view/",[
'methods' => 'GET',
'callback' => 'PrintRESTResponse'
],false);
}
add_action('rest_api_init','SetupREST');
Perhaps it might also help, if I'll give some background information about my development machine:
- OS: Windows 10
- Server: Apache Web Server (included inside XAMPP)
- Wordpress Version: 5.3.2
- PHP Version: 7.4
- Development IDE: Eclipse 2019-12 CDT ( with PHP Plugin )
From my research, everything should work fine. However, it doesnt :/ Did I miss something crucial?
Update:
WordPress REST API Routing
WordPress is having a default route for all request which are directed to the REST API ( at least if you use XAMPP with the Bitnami WordPress application module). Now, if one wants to send a request to said REST API, the person needs to use an URL with the form of ip:port/wp-json/rest_route. ip ressembles the ip address of the server which is hosting wordpress. port is the port of said server. wp-json, however, is the portion which differs an ordinary request from a request to the REST API. Everything after this portion (rest_route) is the rest route which I've defined in the above source code.
What went wrong?
My request was pointed to the wrong endpoint. Therefore I used the URL 'localhost:wpPort/wordpress/student/v1/view/'. However, the 'wp-json/' portion is missing. Therefore WordPress will search for a page that doesn't exist in the first place. Instead I should have used the URL 'localhost:wpPort/wordpress/wp-json/student/v1/view/'.
After some troubleshooting it turns out the URL being used to test was missing a part of the endpoint path.
Here is the correct path to test the newly registered endpoint.
localhost:80/wordpress/wp-json/student/v1/view/
Here's some more reading on WP Rest API endpoints:
https://developer.wordpress.org/rest-api/extending-the-rest-api/routes-and-endpoints/

404 calling php files with axios in a ReactJS app

I am trying to dispatch an action with Reactjs and axios to an api created with php.
When using 'get', I do get the php file in plain text, but when calling the file with the 'post' method I get a 404 error.
The php file is in the same node project but in the api folder. I don't know if I need to create an express server parallel to my app.
Also tried to setup a local server with xampp and I get a 401, even adding the header to the php file where you allow access to everyone;
header("Access-Control-Allow-Origin: *");
My code to dispatch the action:
return axios.post('http://localhost:8000/api/auth.php', data).then(res => {
const token = res.data.token;
dispatch(setCurrentUser(jwtDecode(token)));
});
I am new to a lot of these concepts so some help would be great. My possible solution would be continue testing the access to my xampp local server or try with an express server. This last one I am not sure if it can run php scripts.
But what I would like the most is to just call with axios the file in my project, and this is why I need help.
Thanks in advance!

Running AngularJs and Laravel apps together under the same domain

So im trying to build 2 separate applications 1 that used as a backend (Laravel as a REST api) and Angular application as the client, eventually those 2 apps have to work together under the same domain as a single web app.
What im trying to accomplish:
My Angular app is a single page application that boot from index.html, all the routes are handled by Angular except /api/* that should be handled by Laravel app.
Im using 2 different apps in order to build web app more dynamic so i can easily change my backend framework and technologies and testing each app as a 'stand-alone' more easily.
I dont want to use CORS in my response headers because my REST API serves ONLY my Angular app and not other applications such as api for developers.
I want to use proxy that will foward all requests come from http://localhost:9100/api/* to: http://localhost:9000/api/*
Firstly im running Laravel on port 9000 by running:
php artisan serve --port 9000
And Angular app under port 9100 by running a gulp task (index.html is in the path ./src):
gulp.task('webserver', function(){
connect.server({
root: './src',
port: 9100,
middleware: function(connect, o) {
var url = require('url');
var proxy = require('proxy-middleware');
var options = url.parse('http://localhost:9000/api');
options.route = '/api';
return [proxy(options)];
}
});
});
Both apps work perfectly as a stand-alone, but when im trying to navigate to:
http://localhost:9100/api/v1/comments i receive the following error:
Error: connect ECONNREFUSED at errnoException (net.js:904:11) at Object.afterConnect [as oncomplete] (net.js:895:19)
I tried to investigate the cause of this problem, some people say it connected to my hosts file so i had to add the line:
127.0.0.1 localhost
But it doesnt work.
I tried different gulp task:
gulp.task('webserver', function() {
gulp.src("./src")
.pipe(webserver({
port: 9100,
livereload: true,
open: 'http://localhost:9100',
proxies: [
{
source: '/api', target: 'http://localhost:9000/api'
}
]
}));
});
And i receive the exact same error...
My develop environment is Windows 10 x64 bit.
Did you try to use http-proxy-middleware instead of proxy-middleware?
I experienced the same error with proxy-middleware. (Gulp browser-sync - redirect API request via proxy)
Error: connect ECONNREFUSED
at errnoException (net.js:904:11)
at Object.afterConnect [as oncomplete] (net.js:895:19)
Ended up creating http-proxy-middleware, which solved the issue in my case.
proxy-middleware somehow didn't work on the corporate network. http-proxy just did. (http-proxy-middleware uses http-proxy to do actual proxying)
Guess you are using gulp-webserver; The proxy can be added like:
var proxyMiddleware = require('http-proxy-middleware');
gulp.task('webserver', function() {
gulp.src("./src")
.pipe(webserver({
port: 9100,
livereload: true,
open: 'http://localhost:9100',
middleware: [proxyMiddleware('/api', {target: 'http://localhost:9000'})]
}));
});
Never found out why this error is thrown with proxy-middleware in the corporate network ...
Update:
Think this question has been answered:
It was a problem with the artisan server, had to run it this way:
php artisan serve --host 0.0.0.0
Source:
https://github.com/chimurai/http-proxy-middleware/issues/38
https://github.com/chimurai/http-proxy-middleware/issues/21#issuecomment-138132809

Configuring PhpStorm RESTful Client to work with Laravel

I'm trying to build RESTful API with Laravel using PhpStorm and artisan server, but when I try to test with Rest Client I receive this error:
For now I write only the GET method and I receive correct output in my browser with the address http://localhost:8000/users
This is my code:
routes.php
Route::resource('users','UserController');
UserController.php
public function index()
{
return \Response::json(User::all());
}
I tried also to add json in request window
php artisan serve --host 127.0.0.1 should do the trick.
Looks like PHPStorm does a lookup on localhost which results in 127.0.0.1. But php artisan serve binds to your local IPv6 address ::1.

Zend Soap Server with wsdl - 403 Forbidden

I'm working on a project with ZF in windows environment (using wamp) trying to develop a web service (wsdl definition) with the Soap library of Zend.
Everything works as expected at localhost, the URI http://localhost/mySite/webService/Server.php?wsdl returns a good definition of the service and it can be consumed. But the same using an IP like, let's say http://192.168.1.20/mySite/webService/Server.php?wsdl doesn't seem to be available. I get the error:
Forbidden
You don't have permission to access /mySite/webService/Server.php on this server.
I did the test using http://192.168.0.20/mySite/public/ and it works fine. I get the standard "Welcome to the Zend Framework!" because I haven't changed it yet (it even works using my public IP). In the same project I have some controllers/actions and they fail the same way.
I think the problem could be related with the httpd.conf file, but I don't really know how to handle it. Or maybe the .htaccess on this project?
Has somebody a clue?
Thanks.
Try without cache in your client:
$options['cache_wsdl'] = WSDL_CACHE_NONE:
$uri = http://192.168.1.20/mySite/webService/Server.php?wsdl;
$client = new Zend_Soap_Client($uri, $options);

Categories