Request from front end to backend is interupt - reactjs

I have api (have use load balance). when I send requests from front-end to back-end, then back-end intermittent receive these requests. This request is show "pending" and the end show:
*"Access to XMLHttpRequest at 'https://frontend.domain.com' from origin 'https://backend.domain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'https://backend.domain, ', but only one is allowed."
Although, I have already opened cors in back-end. Below is file config nginx of front-end domain.
config nginx
server {
if ($host = frontend.domain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = frontend.domain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
listen [::]:80;
access_log off;
server_name frontend.domain.com;
client_max_body_size 20M;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name frontend.domain.com
client_max_body_size 20M;
ssl off;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
location / {
proxy_pass http://0.0.0.0:3000;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_method GET;
proxy_connect_timeout 6000;
proxy_send_timeout 6000;
proxy_read_timeout 6000;
send_timeout 6000;
client_max_body_size 20M;
}
ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem; # managed by Certbot
}
And addition before I no have, suddenly after I restart the server I have this error.
Any tip to this error goes away. Thanks.

Related

Nginx reverse proxy problem on an specified location

I wanted to access one of the react projects as the following instruction.
https://my.domain.com/app1 ==> HTTP://localhost:7001
The following is the Nginx config:
server {
listen 80;
server_name my.domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/my.domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/my.domain.com/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
server_name my.domain.com;
error_log /var/log/nginx/my.domain.com.err;
access_log /var/log/nginx/my.domain.com.log;
location /app1 {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
add_header Pragma "no-cache";
add_header Cache-Control "no-cache";
proxy_pass http://localhost:7001/;
proxy_redirect default;
sub_filter_types *;
sub_filter 'action="/' 'action="/app1/';
sub_filter 'href="/' 'href="/app1/';
sub_filter 'src="/' 'src="/app1/';
sub_filter_once off;
}
}
The problem is that some of the source files responded by https://my.domain.com/app1/... but some responded by https://my.domain.com/..., there for the second one is not accessible and gives HTTP 404 error.
For example, the following sources have been responded as HTTP 200:
https://my.domain.com/app1/static/css/main.091g2s3f.chunk.css
https://my.domain.com/app1/static/js/2.29c551h6.chunk.js
And the following is responded as HTTP 404:
https://my.domain.com/media/contact-title.png
https://my.domain.com/static/media/Yekan.05744gh2.woff
https://my.domain.com/logo.svg
Any idea?
Thanks in advance.
What I did and not solved:
I did configure the Nginx rewrite, simple proxy_pass and regex but the problem not solved, in addition, I got all the responses as HTTP 404.
You are only forwarding /app1 to upstream, if u want to forward media and static etc, then you need to change the following
location /app1
to
location /
OR if you are serving them as static files, add the following
location /static {
root /path/to/your/static/path;
}
then you can call all your static files from example.com/static/something.css

fix 502 gate way error in react/nginx in aws

i try to run a react application on amazon ec2 instance.when i listen on default port(port:3000) it's running perfectly, but when change the port number from 3000 to 4000 by, it shows 502 gate way error like below.
MY NGINX SETUP:
server {
listen 80 default_server;
server_name MY_DOMAIN;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl default_server;
server_name MY_DOMAIN;
ssl_certificate /etc/letsencrypt/live/MY_DOMAIN/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/MY_DOMAIN/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location / {
proxy_pass
http://PRIVATE_IP:4000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location /server {
proxy_pass
http://PRIVATE_IP:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
GET https://MY_DOMAIN_URL/static/js/6.chunk.js net::ERR_ABORTED 502 (Bad
Gateway)
favicon.ico:1 GET https://MY_DOMAIN_URL/favicon.ico 502 (Bad Gateway)
manifest.json:1 GET https://MY_DOMAIN_URL/manifest.json 502 (Bad
Gateway)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Express API backend receiving requests but not responding, Nginx

I have a front end reactjs being served by nginx. shown here:
server {
listen 80 default_server;
server_name website.* www.website.*;
root /home/developer/website/frontend/build;
location / {
try_files $uri /index.html;
}
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:4000;
}
}
Additionally, I have a second express app receiving requests at 127.0.0.1:4000. The front end calls fetch to 'api/something' and the express app receives that and handles it but does not respond, the client side errors with 504 (Gateway Time-out). Any ideas?
You are missing the upstream server directive. Try this
upstream api {
server 127.0.0.1:4000;
}
# remove www from the url
server {
listen 80;
server_name www.website.com;
return 301 $scheme://website.com$request_uri;
}
server {
listen 0.0.0.0:80;
server_name website.com website;
error_log /var/log/nginx/website.com-error.log error;
access_log /var/log/nginx/website.log;
# pass the request to the node.js server with the correct headers
location /api/ {
proxy_pass http://api/;
proxy_ignore_headers X-Accel-Expires Expires Cache-Control;
proxy_ignore_headers Set-Cookie;
proxy_hide_header Set-Cookie;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_set_header X-NginX-Proxy true;
}
}

Nginx setup for angular app with node API

I have been building API using express and front end using angular. Both are in different directory named /var/www/apps/client and /var/www/apps/server.
I want to deploy my application using nginx as a webserver. I am able to host angular application but when trying to request my API getting following error on browser.
Mixed Content: The page at 'https://xxx.xxx.xxx.xxx/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxx.xxx.xxx.xxx:3000/api/videos'. This request has been blocked; the content must be served over HTTPS.
Nginx config
server {
listen 80;
server_name localhost;
access_log /var/log/client/access.log;
error_log /var/log/client/error.log;
root /var/www/apps/client/dist;
charset utf-8;
location / {
rewrite ^ https://$host$request_uri? permanent;
}
}
server {
listen 443 ssl;
server_name localhost;
access_log /var/log/client/access.log;
error_log /var/log/client/error.log;
ssl_certificate /etc/nginx/ssl/nginx.crt;
ssl_certificate_key /etc/nginx/ssl/nginx.key;
keepalive_timeout 5;
root /var/www/apps/client/dist;
charset utf-8;
location ~ ^/(scripts.*js|styles|images) {
gzip_static on;
expires 1y;
add_header Cache-Control public;
add_header ETag "";
break;
}
location / {
try_files $uri /index.html;
}
}
My express server code -
var express = require("express"),
app = express(),
mongoose = require("mongoose"),
config = require("./config");
app.set("appPath", config.root);
mongoose.connect(config.mongo.uri, config.mongo.options);
app.use(function (req, res, next) {
"use strict";
// Website you wish to allow to connect
res.setHeader("Access-Control-Allow-Origin", "*");
// Request methods you wish to allow
res.setHeader("Access-Control-Allow-Methods",
"GET, POST, OPTIONS, PUT, PATCH, DELETE");
// Request headers you wish to allow
res.setHeader("Access-Control-Allow-Headers",
"X-Requested-With,content-type,api_key,adminid,userid");
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader("Access-Control-Allow-Credentials", true);
// Pass to next layer of middleware
next();
});
app.use(function (req, res, next) {
"use strict";
next();
});
require("./routes")(app);
app.listen(config.port);
console.log("Listening on port " + config.port)
Serving API at 3000 port. I found this If possible use nginx to redirect by location to node app?
But this is also not working. Any kind of help would be great.
I don't think, the issue is completely with your nginx config. The error message implies that the initial connection from the browser and nginx server was over https. And then you are trying to make an insecure connection through XMLHttpRequest with http.
Solution:
Either load up the initial connection as insecure i.e http
Or make your XMLHttpRequest with a secure connection i.e https.
To help with the config file
# For http
server {
listen 80
server_name localhost
access_log /var/log/client/access.log
error_log /var/log/client/error.log
root /var/www/apps/client/dist
charset utf-8
location / {
proxy_set_header X-Real-IP $remote_addr;
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_pass http://localhost:3000/;
}
}
# For https
server {
listen 443 ssl
server_name localhost
access_log /var/log/client/access.log
error_log /var/log/client/error.log
ssl_certificate /etc/nginx/ssl/nginx.crt;
ssl_certificate_key /etc/nginx/ssl/nginx.key;
root /var/www/apps/client/dist
charset utf-8
location / {
proxy_set_header X-Real-IP $remote_addr;
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_pass http://localhost:3000/;
}
}
Restart Nginx
sudo /etc/init.d/nginx restart
Issue is the other endpoint which you are hitting internally is not Https protected, because of which you are getting the error
http://xxx.xxx.xxx.xxx:3000/api/videos
So, you should write a separate config for client to make the connection https secured. Add that proxy pass also to redirect all your request coming to port 443 to 3000 similar what you did for server
location / {
proxy_set_header X-Real-IP $remote_addr;
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_pass http://localhost:3000/;
}
Make sure ports are different for node and client app

Connect nginx websocket with SSL ciphers

I deployed a nginx web service with below config
server {
listen 443;
server_name localhost;
root html;
index index.html index.htm;
ssl on;
ssl_certificate /etc/nginx/ssl/current.crt;
ssl_certificate_key /etc/nginx/ssl/current.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers "HIGH:!aNULL:!MD5 or HIGH:!aNULL:!MD5:!3DES";
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://172.16.9.245:33400;
}
location /csconf/ {
proxy_pass http://172.16.9.245:33200;
}
location /websockets/ {
proxy_pass http://172.16.9.245:33143;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
My customer try to connect into this websocket using C code
.....
const SSL_METHOD *meth = SSLv3_method();
SslCtx = SSL_CTX_new(meth);
SSL_CTX_set_options(SslCtx, SSL_OP_NO_COMPRESSION);
SSL_CTX_set_cipher_list(SslCtx, "RC4-SHA:DEC-CBC3-SHA:DES-CBC-SHA");
.....
int ret = SSL_connect(obj->ssl);
It throw "error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure:s23_clnt.c:741:"
Why the handshake error? Please help me to explain the problem.
Thanks
I'm not sure if this is the reason, but it fixed the handshake error I was getting:
Change
proxy_set_header Connection "upgrade";
To capital Upgrade
proxy_set_header Connection "Upgrade";

Resources