I have deployed my VueJs APP on docker container, but when I added nginx reverse proxy in my config file my cookie header become too large
my nginx conf
location / {
add_header "Access-Control-Allow-Origin" "*";
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin';
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://[back-end-api]/public/index.php/api ;
}
Related
Browser not updating Vue.js site cache.
Several major updates have been downloaded to the site, but the browser still displays the old version of the site.
The application is deployed on the Nginx server. I have already tried to disable the cache in the conf file by passing headers but without success.
Here are the headers on a normal reboot
Here are the headers when reloading without cache "Ctrl + F5" .
Here is my site configuration in Nginx. `
server {
server_name mysitedomain.online;
location = /favicon.ico { access_log off; log_not_found off; }
root /var/www/mysitedomain/frontend/dist;
index index.html index.htm index.nginx-debian.html;
location ~(index.html|service-worker.js)$ {
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}
location = /{
try_files $uri $uri/ /index.html;
add_header Last_Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}
location = /ru/ {
try_files $uri $uri/ /index.html;
add_header Last_Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}
location = /en/ {
try_files $uri $uri/ /index.html;
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/mysitedomain.online/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/mysitedomain.online/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
}
`I would be glad for any answers, since I have been doing this for quite some time and I cannot get the site updated for all users.
I have already tried to disable the cache in the conf file by passing headers but without
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
`
I want to serve my static website and API service from same machine using nginx.
Website is present in /var/www/html
API service is running on port 8000
http://localhost should open static website
http://localhost/api should proxy api service which is running on port 8000
With the help of http://nginx.org/en/docs/beginners_guide.html I tried this config
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
location /api {
proxy_pass http://localhost:8000;
}
}
http://localhost is working fine but http://localhost/api is giving me error 404.
What should be correct configuration to achive such infrastucture?
Here I am writing a conf that can perform the operation you need:
server {
listen 80;
server_name <server_name_you_prefers>;
location / {
alias /var/www/html/; # Static directory's complete path from root
}
location /api {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_pass_request_headers on;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET,PUT,PATCH,POST,DELETE,OPTIONS,HEAD';
add_header 'Access-Control-Expose-Headers' 'Origin,Content-Length,Content-Range,Authorization,Content-Type';
add_header 'Access-Control-Allow-Headers' 'Content-Length,Content-Range,Authorization,Content-Type,x-json-response';
add_header 'Access-Control-Allow-Credentials' 'true' always;
}
}
Your nginx reverse-proxy will pass all the requests contains (or start by, I'm not sure) "/api" to your API service.
When you send the request to http://localhost/api, the route "/api" in your code is invoked. I guess this route does not exist because you have 404.
To access your API, 1 simple solution is to prefix all your API by "/api".
For example, if you define the API GET "/version", it should become "/api/version", then you can access this API at http://localhost/api/version.
I have two apps running on my server.
A react app on port 4512 (locally on HTTP) and 5512 (on https). Can be accessed on https://merchant.abc.com:5512
A node js (express) API on port 4511 (locally on http) and 5511 (on https) served on https://ce.abc.com:5511
Initially, I was using a wildcard SSL certificate for both sub-domains, and nodejs was taking care of CORS. But we were then required to use separate SSL certificates for both domains. When I used separate SSL certificates, Nginx started to deny cors requests (I was able to use API using postman).
I then read about Nginx cors options on some posts here and came up with the following Nginx settings
/etc/nginx/sites-available/default
# Vendor API
server {
listen 5511 ssl;
ssl_certificate /ssl/ssl-bundle-api.crt;
ssl_certificate_key /ssl/ssl-api.key;
location /{
include /etc/nginx/shared/allow-cors;
proxy_pass http://localhost:4511;
proxy_redirect off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Ssl on;
}
}
# Retailer app
server {
listen 5512 ssl;
ssl_certificate /ssl/ssl-bundle-react.crt;
ssl_certificate_key /ssl/ssl-react.key;
location /{
proxy_pass http://localhost:4512;
proxy_redirect off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Ssl on;
}
}
/etc/nginx/shared/allow-cors
if ($request_method = "OPTIONS") {
add_header Access-Control-Allow-Origin $http_origin always;
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Methods 'DELETE,GET,OPTIONS,POST,PUT' always;
add_header Access-Control-Allow-Headers 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With,X-Token-Auth,X-Mx-ReqToken,X-Requested-With' always;
add_header 'Access-Control-Max-Age' 1728000 always;
add_header 'Content-Type' 'text/plain charset=UTF-8' always;
add_header 'Content-Length' 0 always;
return 204;
}
add_header Access-Control-Allow-Origin $http_origin always;
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Methods 'DELETE,GET,OPTIONS,POST,PUT' always;
add_header Access-Control-Allow-Headers 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With,X-Token-Auth,X-Mx-ReqToken,X-Requested-With' always;
I then removed the cors settings from the nodejs API. This seemed to fix the issue on my aws ec2 ubuntu 18.04 instance completely. But when I deploy this code on the client's on-premise server (created using image of my ec2 instance) it again has issues. On Firefox it seems like the pre-flight check gets the expected 204, but then I don't see any POST request being sent.
On Chrome I see a successful pre-flight check with 204. I also see the actual POST request in chrome, but with a (failed) net::ERR_FAILED status.
Can somebody please help be resolving this.
I have react application running on Nginx and backend application on Nodejs(running on another port 8080) with routes of patterns "/org-metadata/**, /proxy-api/**, /node-api/**".
I am trying to proxy the nginx to nodejs running on 8080, but it does not reach the backend. and the nginx gives the 503 Service Unavailable response and some times response 200 with You need to enable JavaScript to run this app.
Can some one pls point where am I missing anything?
Below is my nginx.conf file :
worker_processes auto;
events {
worker_connections 8000;
multi_accept on;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
server {
# listen on port 80
listen 80;
# where the root here
root /var/www;
# what file to server as index
index index.html index.htm;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to redirecting to index.html
try_files $uri $uri/ /index.html;
}
# Javascript and CSS files
location ~* \.(?:css|js)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
location ~ (proxy-api|org-metadata|node-api) {
try_files $uri #nodejs;
}
location #nodejs {
proxy_pass http://nodejs:8080;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;
}
}
}
Presently I have these .htaccess rules working perfectly on my Apache server:
<IfModule mod_headers.c>
SetEnvIf Origin "https://(www\.)?(domain.com|beta.domain.com|domain.loc)$" AccessControlAllowOrigin=$0
Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, X-CSRF-Token, X-XSRF-TOKEN"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Credentials true
</IfModule>
<IfModule mod_rewrite.c>
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>
Recent decision to switch to nginx requires us to implement the same. I'm still getting a hang of its internals and really need help converting this into its nginx config counterpart.
EDIT: What I tried so far:
server {
listen 80;
listen [::]:80;
listen 443 ssl http2;
listen [::]:443 ssl http2;
include snippets/self-signed.conf;
include snippets/ssl-params.conf;
server_name api.mydomain.loc;
root /var/www/mydomain/api/public;
index index.html index.htm index.php;
location / {
if ($http_origin ~* https://(www\.)?(mydomain.loc)) {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, X-CSRF-Token, X-XSRF-TOKEN";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Credentials true;
}
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ /\.ht {
deny all;
}
}
Help would be greatly appreciated.
The simplest nginx equivalent of the Apache config in the question would be, just use add_header and wrap it all in anif block that does a regex match against $http_origin:
location / {
if ($http_origin ~* https://(www\.)?(domain.com|beta.domain.com|domain.loc)) {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, X-CSRF-Token, X-XSRF-TOKEN";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
add_header Access-Control-Allow-Credentials true
}
# use $http_authorization to get the value of the Authorization request header
}
The extra RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] stuff that you need to do with Apache isn’t necessary with nginx; instead just use $http_authorization.
Note that variables in nginx that have names prefixed with $http_ are special variables:
$http_name
arbitrary request header field; the last part of a variable name is the field name
converted to lower case with dashes replaced by underscores
Thus $http_origin gives you the value of the Origin request header, $http_authorization gives you the value of the Authorization request header, etc.