skip to Main Content

I have problem with CORS in my Node app on Plesk. On example.com/checkout.html is the form with PayPal checkout, after the payment goes through, it sends the form data to example.com/abc (Node – server.js with a script that saves data to a mysql database) via fetch() function in javascript app.js on example.com/checkout.html.

But when data is sent to example.com/abc, nothing happens and a message appears: "Cross-Origin request blocked: same-origin policy does not allow loading of remote resource example.com:3000/abc. (Reason: CORS request was not successful). Status code: (null). Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource."

app.js:
fetch("https://example.com:3000/abc", {
 method: "POST",
 headers: {
 " Content-Type": "application/json",
 },
 body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
});

server.js:
app.post('/abc', (req, res) => {
 //some stuff    
});

It works fine on localhost. But it doesn’t work on real domain on Plesk server. Plesk is on VPS hosting, both brand new.

I don’t know what to try anymore.

Thank you for help and tips.

I tried set up CORS in PLESK as in support.plesk.com/hc/en-us/articles/12377597400087-How-to-set-up-CORS-cross-origin-resource-sharing-in-Plesk-for-Linux. I tried all, in Apache, in nginx, with http, with https, with port, without port, with localhost, with "*".

I tried to install cors in Node.js and upgraded code with cors in Node. I tried it without cors().

Tried all variants here: stackoverflow.com/questions/7067966/why-doesnt-adding-cors-headers-to-an-options-route-allow-browsers-to-access-my?page=1&tab=scoredesc#tab-top
Tried: geeksforgeeks.org/how-to-allow-cors-in-express/

Tried: enable-cors.org/server_expressjs.html

Nothing works.

Still: "Cross-Origin request blocked: same-origin policy does not allow loading of remote resource domain.com:3000/abc. (Reason: CORS request was not successful). Status code: (null). Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource."

What am I doing wrong?

2

Answers


  1. an alternate solution with no CORS

    If you are in need of a solution to your requirement as early as possible, request you may please see
    if the following approach is usable.

    Please serve your application from the same origin – protocol.example.com:3000. This will take-away the issue of CORS as there is no CORS in this context.

    Using the built-in middleware express.static in Express, this is quickly and easily doable.

    For a code example, please see the answer in the post – a minimal code example under given under citations.

    For another example with detailed explanation, please see the post – a detailed code example below.

    Citations:

    a minimal code example

    a detailed code example

    Login or Signup to reply.
  2. This is a typical case of CORS.
    If the hosting platform does not interfere with the CORS setup in app, using the middleware cors downloadable as NPM package will be relatively easy.

    Please see the minimal code to set this up.

    const express = require('express')
    const cors = require('cors')
    const app = express()
     
    app.use(cors())
    

    The default configuration shown below would suffice to your case.

    {
      "origin": "*",
      "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
      "preflightContinue": false,
      "optionsSuccessStatus": 204
    }
    

    Citation:
    cors

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search