Can PHP Webpage Make an AJAX POST Request to Express Server on the Same or Different Ports?

Question

Can PHP Webpage Make an AJAX POST Request to Express Server on the Same or Different Ports?

Trying to enable a POST request through AJAX from a site to an express server triggered some unexpected challenges. When running the server on the same localhost port as the website (localhost:8080), the webpage fails to render and an error message pops up saying, "Cannot GET /mogle/income.php." This is happening despite the fact that "mogle/income.php" is intended to be the page for the request. Conversely, when changing the server to a different port (e.g., localhost:8000), the AJAX POST call stops functioning altogether. The common belief appears to be that requests across different ports can only be done with JSONP, which exclusively supports GET requests, while my requirement demands the use of POST.

In an attempt to rectify the issue with the webpage failing to render on the same port scenario, I implemented an app.get function in my server.js file, outlined below. However, this resulted in the PHP file being downloaded instead of rendering as expected, likely due to its file type difference compared to HTML files. As a result, there arises a concern about having to implement individual app.get statements for every other webpage present on the site (e.g., homepage.php, login.php) within the server.js file.

app.get("/mogle/income.php", (req, res) => {
  // Using "../../" due to server file location
  res.sendFile(path.join(__dirname, "../../income.php"));
});

app.post("/path", async (req, res) => {
  // Handle response
});

Reflecting on the constraints and issues faced, it beckons the question - what is the standard practice for transmitting requests (both POST and GET) from websites to servers regarding port configurations?

javascript express web

Answer 1

Answer №1

Consider the following solution:

To allow POST/GET/PUT requests on your server, update the header values as shown below:

const express = require('express')
const bodyParser = require('body-parser');
const app = express()

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.all("/*", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  next();
});

app.post('/yourendpoint', function (req, res) {
  res.send(req.body)
})

app.listen(8080, function () {
  console.log('Server Listening on - localhost:8080!')
})

For Angular Example, here is how you can post data from client side:

let myDataObj = { name: "test", age: 22 , otherprop: "my post data values"};
this.http.post('http://localhost:8080/yourendpoint', JSON.stringify(myDataObj), {
  headers: headers
})
.subscribe(data => {
  console.log(data);
});

Answer 2

Consider the following solution:

To allow POST/GET/PUT requests on your server, update the header values as shown below:

const express = require('express')
const bodyParser = require('body-parser');
const app = express()

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.all("/*", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  next();
});

app.post('/yourendpoint', function (req, res) {
  res.send(req.body)
})

app.listen(8080, function () {
  console.log('Server Listening on - localhost:8080!')
})

For Angular Example, here is how you can post data from client side:

let myDataObj = { name: "test", age: 22 , otherprop: "my post data values"};
this.http.post('http://localhost:8080/yourendpoint', JSON.stringify(myDataObj), {
  headers: headers
})
.subscribe(data => {
  console.log(data);
});

Can PHP Webpage Make an AJAX POST Request to Express Server on the Same or Different Ports?

Answer №1

Similar questions

What is the best way to show toast notifications for various selections in a dropdown menu?

Regain the cursor focus on a text input field once it has been disabled and re-enabled using AngularJS

Is there a way to compare timestamps in PostgreSQL using moment.js and focus only on the date aspect?

Prevent form submission using jQuery based on ajax response, or allow it to submit otherwise

"Populate a div with an array of images extracted from a JSON file

Unlocking the secret to obtaining durable identity provider tokens for JavaScript in web browsers

Adding a panel dynamically with Bootstrap incorrectly

Angular: Exploring the possibilities of condition-based click event implementation

Tips for comparing props in the ComponentDidUpdate method when dealing with a complex data structure that is connected to Redux

Using for loops in Vue.js to dynamically generate HTML elements

Guide to displaying a server response within a React application

PHP code for sending email with attachment file

Execute function when button is not active

Using React js to transform objects into arrays for useState

When the CSS animation has finished in JavaScript

Is it possible to interpret the camera using radius or diameter instead of the traditional x, y, z coordinates

Ways to verify if a firebase timestamp surpasses the present date

Modify a class attribute within a function

Experiencing difficulties when trying to set up the express/body-parser node js eclipse

Advantages of passing individual variables instead of the entire object from HTML to JavaScript in AngularJS