I am trying to set cache header for service worker through nginx in create react app project, in the configuration, I tried
location /service-worker.js {
add_header Cache-Control "no-cache";
proxy_cache_bypass $http_pragma;
proxy_cache_revalidate on;
expires off;
access_log off;
}
However when I load my page, sw registration fails with the message.
A bad HTTP response code (404) was received when fetching the script.
registerServiceWorker.js:71 Error during service worker registration: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
Can someone please suggest a way with nginx using create-react-app?
as per your configuration service-worker.js must be in / root directory defined with root nginx directive.
Please check if the file is present there. If you are using express and express static and have placed the file in public/assets directory, it won't work. if for this file you want to to have different location. you can use alias directive.
Related
What I want is to restrict access to files for unauthorized user.
PocketBase documentation says I can retrieve the file URL and access files through it. The example URL for a file would be like this:
http://127.0.0.1:8090/api/files/example/kfzjt5oy8r34hvn/test_52iWbGinWd.png
I can prevent unauthorized users to get this URL, but authorized users can share URL with other one.
Any ideas?
I found a good way to secure files with nginx, by adding an extra location for my PocketBase server block and using an extra backend with one endpoint.
So, my nginx looks like this:
server {
listen 80;
server_name example.com;
location /api/files {
proxy_intercept_errors on;
error_page 404 = #fallback;
proxy_pass http://127.0.0.1:5000;
}
location / {
proxy_pass http://127.0.0.1:8090;
}
location #fallback {
proxy_pass http://127.0.0.1:8090;
}
}
Where my expressjs backend working on port :5000 checks JWT and responds with 404 if it is valid. Nginx will redirect to :8090 (PocketBase) if 404 returned on :5000.
I'm trying to link with my mongoDB database, using axios, Vue, and my server is running NGINX.
In my App.vue file, where the axios requests are, I have this:
export default {
name: 'App',
data(){
return {
baseApiURL: '[HTTP or HTTPS]://example.com:4000/api',
This works over HTTP. When I change it to HTTPS, it doesn't. I have tried using the IP address, and using the domain address. Network tab on Chrome says:
Request URL: https://www.example.com/api/
Request Method: GET
Status Code: 401 Unauthorized
I don't understand what this means exactly.
My NGINX config:
server {
listen 80 default_server;
ssl on;
listen 443;
server_name example.com;
ssl_certificate /usr/src/app/ssl/domain.cert.pem;
ssl_certificate_key /usr/src/app/ssl/private.key.pem;
# vue app & front-end files
location / {
root /usr/src/app/dist;
try_files $uri /index.html;
}
# node api reverse proxy
location /api/ {
proxy_pass http://localhost:4000/;
}
}
I'm not sure if there's anything else I should include in this info, please let me know. I feel like it should be a small issue as it's working over HTTP.
Not really an "answer" as it doesn't solve the exact initial problem, but I solved my problem of my site not working over HTTPS by using Caddy Server instead of NGINX, which somehow does it automatically.
I have the following nginx config that handles serving my static website and redirecting requests to my REST backend:
server {
listen 80 default_server;
server_name _;
# Host static content directly
location / {
root /var/www/html;
index index.html;
try_files $uri $uri/ =404;
}
# Forward api requests to REST server
location /api {
proxy_pass http://127.0.0.1:8080;
}
}
If my REST backend goes offline the proxy module returns an HTTP status of "502 Bad Gateway" and I can redirect requests to a status page by adding the following:
# Rewrite "502 Bad Gateway" to "503 Service unavailable"
error_page 502 =503 #status_offline;
# Show offline status page whenever 503 status is returned
error_page 503 #status_offline;
location #status_offline {
root /var/www/html;
rewrite ^(.*)$ /status_offline.html break;
}
However, this will only work for requests that access the REST backend directly. How can I redirect requests to my static website in the same way whenever the backend is offline?
Nginx does have some health check and status monitoring capabilities that seem like they could be related, but I couldn't find a proper way to use them.
While its intended use case is actually for authorization, I found nginx's auth_request module to work for me:
# Host static content directly
location / {
# Check if REST server is online before serving site
auth_request /api/status; # Continues when 2xx HTTP status is returned
# If not, redirect to offline status page
error_page 500 =503 #status_offline;
root /var/www/html;
index index.html;
try_files $uri $uri/ =404;
}
It will call /api/status as a subrequest before serving the static content and will only continue when the subrequest returns an HTTP status in the 200 range. It seems to return status 500 when the server is offline.
This method might have some performance implications since you're now always doing an extra request, but that seems to be an inherent requirement of checking whether your service is online.
I think this is the correct answer - auth request is ideal for any situation where you want to "ping" a backend before returning the requested content.
I have used a similar scheme in the past for an nginx server where I wanted to check if an auth header was correct before proxying to an S3 bucket.
My server configuration is a TYPO3 installation Vs. 6.2.31 combined with a reverse proxy. The system is running fine with http.
When we try to switch to https we geht this Error Message in the backend:
"Connection Problem
Sorry, but an error occurred while connecting to the server. Please check your network connection."
And the page tree is not loading.
When switching back to http all is working one again.
Our settings:
[SYS][reverseProxyIP] = (IP of our reverse Proxy)
[SYS][reverseProxyHeaderMultiValue] = last
[SYS][reverseProxySSL] = *
What i tried:
deactivate all extensions apart from the system extensions
no entry in syslog (error reporting is on development)
no entries in the server logs
lockSSL in install tool 3 results in never ending 302 redirects
lockSSL with option 2 results in this error message:
Fatal error: Uncaught exception 'RuntimeException' with message 'TYPO3 Backend not accessed via SSL: TYPO3 Backend is configured to only be accessible through SSL. Change the URL in your browser and try again.' in /srv/httpd/sites/fland_ww1/typo3_src-6.2.31/typo3/sysext/core/Classes/Core/Bootstrap.php:897 Stack trace: #0 /srv/httpd/sites/fland_ww1/typo3_src-6.2.31/typo3/init.php(54): TYPO3\CMS\Core\Core\Bootstrap->checkSslBackendAndRedirectIfNeeded() #1 /srv/httpd/sites/fland_ww1/typo3_src-6.2.31/typo3/index.php(21): require('/srv/httpd/site...') #2 {main} thrown in /srv/httpd/sites/fland_ww1/typo3_src-6.2.31/typo3/sysext/core/Classes/Core/Bootstrap.php on line 897
It seems that some requests e.g. for the page tree are made without ssl - ajax calls i presume - but i dont have a clue how to debug it.
Andy ideas?
Thanks!
I have the same version at a customer and with a load balancer / proxy.
The only difference is [SYS][reverseProxyHeaderMultiValue] = first.
Also, [BE][lockSSL] = 1 is set.
Maybe it helps?
This thread is quite old, but because many people do read until now i will try an answer. We could solve the problem (and once again in a different installation) with the following settings:
[SYS][reverseProxyIP] = (IP of our reverse Proxy)
[SYS][reverseProxyHeaderMultiValue] = firt
[SYS][reverseProxySSL] = *
AND - that is important - changes in the server config too:
RequestHeader set X-Forwarded-Proto "https"
SetEnv proxy-nokeepalive 1
SetEnv proxy-initial-not-pooled 1
I assume it was the first:
RequestHeader set X-Forwarded-Proto "https"
So in the end the problem was in the server config.
I am new to nGinx and I need some help redirecting all errors to a default page.
EG: I want all 500 Internal Server errors and 404 Not Found errors to be redirected to http://www.mydomain.com/error.php
I currrently added this into my nginx.conf file:
http {
server {
error_page 404 http://www.mywebsite.com/error.php;
error_page 500 http://www.mywebsite.com/error.php;
}
................
................
}
But nothing happens after I restart nGinx.
When I visit a page that doesn't exist, I still get the default error page from nGinx.
Are you using FastCGI or Proxy?
To get working with FastCGI or Proxy Maybe, you must switch proxy_intercept_errors or fastcgi_intercept_errors to on.
you may have another "server" section in another conf file which overrides this setting. Place your error_page directives in the conf file that handles your site.