After transitioning to Docker in order to create a virtual network to mimic a real network (using a bridge type with DNS that resolves the FQDN correctly to the corresponding IP), I encountered the following errors in the console.log - no data is being displayed on the frontend website.
ERROR Error: NG0901
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend:4000/crafts. (Reason: CORS request did not succeed). Status code: (null).
ERROR
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://backend:4000/crafts", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://backend:4000/crafts: 0 Unknown Error", error: error }
This is the browser's (Firefox) console.log
I suspect Nginx may be manipulating the headers, or the body could be empty due to server-side configurations with Nginx.
Everything worked fine on localhost.
I am currently working with the Nginx config, but have not had much success. I have come across similar problems, but the solutions I found did not work with my setup. I tried changing the IP to 0.0.0.0 to make it accessible in the network.
Oh, and I am using Node.js and Express.js.
I am using a Dockerfile and docker-compose.yml to create the images, and a PowerShell script to compose the images.
The potential cause of the issue is:
In the backend:
The index.js is up and running and looks like this
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const Routes_1 = __importDefault(require("./Routes"));
const app = (0, express_1.default)();
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "*");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
next();
});
// Middlewares
app.use(express_1.default.json());
app.use(express_1.default.urlencoded({ extended: false })); //changed to see whether it would affect the package issue- should allow
app.use(Routes_1.default);
app.listen(4000,'0.0.0.0'); // or FQDN 'frontend'
console.log('server on port', 4000);
This was generated from index.ts and a build command.
The corresponding Dockerfile:
FROM node:alpine as builder
WORKDIR /app/
COPY . /app/
COPY package.json /app/
COPY package-lock.json /app/
RUN cd /app/
RUN npm install -g
RUN npm update express
RUN npm install pg
FROM nginx:alpine
COPY --from=builder ./app/dist ./usr/share/nginx/html/
EXPOSE 3999-6001
CMD ["nginx", "-g", "daemon off;"]
RUN apk add --update nodejs
RUN apk add --update npm
After the image runs, I open the terminal and run the following in the usr/share/nginx/html directory:
npm i express
npm i pg
node index.js
Then I install Vim and edit the nginx.config like this
vi /etc/nginx/nginx.conf
I add a server directory, have it listen to the FQDN 'frontend' or its corresponding IP and port 4000
listen ip:port kind of syntax
Earlier, I added error and access logs, and there were no issues except for sometimes it stating that IPs are not available. I lack the understanding to interpret that.
PostgreSQL is also running in a Docker container on the default port 5432, with the FQDN of the database being properly resolvable, along with the backend's FQDN.
There is much more information linking the small pieces of code I have. Feel free to inquire for more details if needed or if you believe it would help pinpoint the issue.