404 calling php files with axios in a ReactJS app - php

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!

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/

Artisan serve all functions works perfectly, but when I run it on Xampp some functions doesnt work

Hi guys I'm having problem with my web app, I'm using the php arstisan serve command when I'm developing it on my PC, but when I run the web app on Xampp then connecting my phone to my I.P address so that I can use the web app there. The page loads and some of the forms submitted okay, but others are not when they are all working perfectly on my 127.0.0.1:8000(which is the development URL for laravel), by the way I'm using Vue axios post to all of my forms.
The error code is: 405 method not allowed.
"Trying to get property 'id' of non-object (View: C:\xampp\htdocs\projects\Centralsocial\resources\views\User\feedbackpage.blade.php)"
I think the error is somewhere in this code:
<div id="app">
<survey-component :user_id="<?php echo e(Auth::user()->id); ?>"></survey-component>
</div>
For someone who is having this issue this is how i fixed it
Vue Axios POST
axios.post('/api/surveysubmit/' +this.user_id,{
q1: this.selected.q1,
q2: this.selected.q2,
I added the "+this.user_id"
then in my Api
API.PHP
// user submit survey
Route::post('surveysubmit/{user_id}', 'StudentController#surveysubmit');
I don't know if this is the best way to do it, but hey it works on my end :)

Make request to php endpoint in angular4

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

Where should I create uploads folder and place upload.php while implementing ng2 file upload in localhost:4200

I have implemented ng2 file upload on my server.
It asks for an API URL and I have provided it. Everything works online as expected. But I want to run it locally for further implementation.
This is my upload api URL:
const URL = 'http://example.com/v8/products-api/upload2.php';
In upload2.php the path is given as $path = 'uploads/';.
My question is, where shall I create this folder and where shall I place this php file ?
I am unable to upload a file to server from http:localhost:4200 as it gives the following error:
XMLHttpRequest cannot load http://funiks.com/adminv8/products-api/upload2.php. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
My php includes header("Access-Control-Allow-Origin: *");
I'm no PHP expert, so I can't attest to the CORS configuration of your server. But reading the error you're getting it looks like you can't use a wildcard, so why not try setting your headers like so...
header('Access-Control-Allow-Origin: http://localhost:4200', false);
Also you could try using the Angular Jsonp library rather than the Http. The functions will stay exactly the same, however you do open up some security concerns by doing so...
(P.S. If you use the Jsonp library, just add &callback=JSONP_CALLBACK to the end of your API url)

HTTP status code being overwritten

I am developing a REST api using PHP and Yii2. I have created a custom class for creating (POST) an entity. in that class I have the following code:
if (!$this->AuthenticateRegister($username, $token)) {
throw new ForbiddenHttpException("Invalid token");
}
When I try this locally (WAMP on windows) every thing works fine and I get the proper HTTP status code
But when I upload the code on the host (cpanel) I always get 200 in response
since the HTTP status codes are needed on the client side, how can I resolve this issue?

Categories