Question 224504 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Fetch API doesn't work with server_name in nginx

I have Nginx working on my computer that servers solid.js frontend and two express.js servers.
I’m trying to fetch an endpoint that is exposed in one of my express app.
Everything works correctly until I specify server_name in nginx config for my solid app.
The error that I get is net::ERR_BLOCKED_BY_CLIENT

nginx config for the frontend app

    server {
        listen 80;
        server_name home.localhost;

        location / {
            root D:/Programming/JavaScript/mocks/nginx-tests/solid-statis/dist;
            try_files $uri /index.html =404;
        }
    }

nginx config for my backend apps

    server {
        listen 80;
        server_name api.localhost;

        location /first-api/ {
            proxy_pass http://localhost:7777/;
        }

        location /second-api/ {
            proxy_pass http://ocalhost:7778/;
        }
    }

my express configuration

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors({ origin: '*' }));

app.get('/v1/greetings', (req, res) => {
  res.send({ message: 'Hallo' });
});

app.listen(7778, () => {
  console.log("I'm listening on 7778");
});

I tried to add all of this to my backend config for nginx

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

I also tried

add_header Access-Control-Allow-Origin *;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I'm going to answer my own question:

    It turned out that *.localhost is interpreted as just localhost, and that threw me off completely. So when I changed it I understand that nginx didn't work as it should. Then I changed server_name and updated my hosts file to map it correctly and it started to work as it was supposed to :D


  2. 0

    Based on the provided information, it appears like the issue might be linked to the configuration of your backend apps in Nginx. Specifically, the problem is connected to the CORS (Cross-Origin Resource Sharing) policy, which is probably obstructing the frontend app from accessing the backend API due to varying origins.

    To resolve this problem, you should incorporate the necessary CORS headers to your backend server configuration. Since you are utilizing Express.js for your backend, you can employ the cors middleware to manage CORS headers.

    Here’s how you can do it:

    1. Install the cors package in each of your Express.js backend apps:
    npm install cors
    1. In your Express.js server code, use the cors middleware to enable CORS for your backend APIs:
    const express = require('express');
const cors = require('cors');
const app = express();

// Enable CORS for all routes
app.use(cors());

// ... Define your API routes and other middleware ...

// Initiate your server
const port = 7777; // Replace with your desired port number
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

    Repeat the above steps for your other backend app running on port 7778.

    By enabling CORS in your Express.js apps, you will permit the frontend app served by Solid.js to access the backend APIs without encountering the net::ERR_BLOCKED_BY_CLIENT error.

    Furthermore, you can eliminate the add_header Access-Control-Allow-Origin *; and the other proxy-related configurations from your Nginx backend configuration, as the CORS handling should be done within the Express.js app using the cors middleware. This way, you maintain the Nginx configuration simple and focused on serving the frontend and routing requests to the backend apps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search