I'm trying to learn React by replicating a simple CRUD page I created earlier.
The old CRUD page was a Javascript/jQuery front-end with a form. It sent data via AJAX to a PHP backend page, and the PHP page interacted with a mySQL/mariaDB database.
Everything was locally hosted on my PC on XAMPP Apache, and everything worked fine.
I have now managed to replicate the front end using React, via Create React App and it's running on localhost:3000
I am now stuck. I don't know how to make my front-end (on localhost:3000) send data via AJAX to my back-end PHP page (on localhost:80 running on XAMPP Apache)
There are a lot of us PHP / mariaDB types out there who want to continue using that sub-stack as our back-end. The answers to this question will be enormously helpful in encouraging our crowd to try Create React App and React (I'm loving React btw!). (I was surprised that when I searched [create-react-app] [php] in StackOverflow, I got only 2 hits.)
Update: if this is off-topic for SO, then I'd appreciate suggestions on which SE I should post this on... thanks!
Answering my own question.
The basic problem is one of CORS (cross-origin resource sharing). The error one gets is (in the Chrome console):
No 'Access-Control-Allow-Origin' header is present on the requested resource.
During development only, this issue is easily resolved by adding this line of code to the top of the PHP file:
<?php
header("Access-Control-Allow-Origin: *");
This code should never be left there in production unless you're okay with anyone in the world accessing the PHP file API.
In actual production of this React app, one would expect that the JavaScript and the PHP files would share the same domain, so there won't be a CORS issue.
Related
I have created a login system running on XAMPP for a web app using php, html, materialise for css, and a tiny bit of javascript. The system consists of login, signup, and index pages. In addition, a database is implemented to store user data and app data in the future. If all form validation is verified, a user's sign up details are stored in the database, after which they can log in normally. If a user successfully logs in, a session is started using the start_session() and SESSION global variable of php. The index page indicates whether a session is currently in progress.
Once a session is in progress, I want to display the application contents (yet to be developed) on the index page where a user can practice their functionalities and log out when they want. I want to implement this logic using angular but I'm confused as to how I'm going to get angular to work with the php login system and the database that are running on xampp. I'm a beginner to angular (and development in general) but from what I understand it comes with it's own "server" so the application contents can be hosted locally. Does anyone have any idea how I can get the angular app working with my implementated database and php login system? Thanks in advance!
I am learning angular now a day but I think I can answer your question. By default angular serve your application on localhost:4200. This application would contain your UI and interaction logic. After the app gets loaded in the browser, your application would call PHP script as you would have normally called with HTML because now everything is on browser so you need not to bother about angular server.
However in angular, you should utilize angular services to make server request.
Your web architecture would look like this (think of apache in place of nginx)
I am working on a project which require sessions. I have my PHP files on a server and I am coding the front end in Angular, locally at the moment.
I am creating a $_SESSION in my php file for when a user logs in. Creating the post request on my local angular project, any $_SESSION property is returned as empty (e.g. $_SESSION['key'] is empty). However, it works fine when testing on Postman, and also works fine when I compile my angular app and put it on the server... So it works on Postman, and on the angular app on the server, but not the angular app locally (with the exact same code).
I have added CORS to my PHP files, and can use many other post/get requests locally, just not the session.
Is there any particular reason this doesn't work, or a way to get it working locally? As I don't want to compile and upload the project every time to test it out.
Any other information needed, please let me know.
Thank you in advance.
am new to react js application development.
we have two application from front end side. One is developed in Anuglar JS and another is developed in React JS. These two are hosted in different URL's. These two application should have to communication with PHP for getting common data, which is deployed in another host name.
Here the problem is from angular JS am able to hit php, with out any CORS error, and we got the response.
But from my react JS application am not able to send request to PHP. It gives CORS erros.
In Anuglar JS, one one request is going to the server , here there is not options request.But in React JS we have options request also.
Could you please help me , what changes have to do either front end or back end.
Thank you,
SrinivasaRao.CH
I am working on a project that was written in PHP and being served on an Apache server. I have been asked to integrate Socket.io live chat functionality into a page that was written in PHP and served by Apache. To do this, I've been writing a Node.js application with Express. But I can't figure out a way to integrate my Express app into the PHP page.
I have googled this for several hours and found many tutorials about running Node.js and Apache on the same server but different ports, but as I understand it, that strategy would limit me to serving different pages or different files. What I need is to be able to use the Socket.io livechat function on the PHP page.
I thought maybe I could use an iframe integrated into the PHP page to display the livechat window itself, but I also need to display new chat request notifications on the PHP page and give the user the ability to click different tabs to switch between chat windows. I thought I could probably have the tab clicks handled by writing a REST API on the Node.js end and letting the PHP page make calls to that. But I'm not sure how I would have the PHP page display new chat request notifications if I can't have Express and Apache handling the same page.
So my question is basically how to:
1) Configure things so one PHP page can be accessed and manipulated by both the PHP side and the Node.js/Express side of things, or
2) Route Socket.io events from the Node.js/Express side into the PHP side so that they can be handled on that end.
Context: I know minimal, minimal PHP--that's being handled by my colleagues, and my role is the JavaScript and Node.js stuff--so please keep that in mind.
I'm trying to use a HTML/PHP form on my website. The problem is submit just opens a new page displaying my php as text, this is when I open the html file on my computer using Google Chrome. When I uploaded to my hosting service, TK dot com, I get a 405 error when using the form. I've tested on working/downloadable php forms and the same thing happens.
From my understanding, I can't just use php on my site without setting up an environment. I've read I need to use some sort of program to do this (apache). Which kind of confuses me further, how would I enable this type of service, which installs to my computer, to run on my website when my computer is off?
Any tips or guides on how to do use apache for PHP forms on my website or similar that I can be redirected to would be really helpful. Please let me know if any extra information is needed.