1

I have a Vue app running inside an nginx:alpine container with a custom nginx config to deal with browser navigation (Vue Router's html mode).

The problem is that any path other than the root (/) is giving 404's, with error messages like:

2018/11/25 07:56:13 [error] 7#7: *2 open() "/usr/share/nginx/html/home" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /home HTTP/1.1", host: "localhost:4000"

I'm using a custom nginx config file that looks like this:

worker_processes  1;

events {
    worker_connections  1024;
}

http {

    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {

        listen       80;
        server_name  localhost;

        root /usr/share/nginx/html;
        index index.html;

        location / {

            try_files $uri $uri/ /index.html;

            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }

            if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }

            if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }

        }

        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
            # Some basic cache-control for static files to be sent to the browser
            expires max;
            add_header Pragma public;
            add_header Cache-Control "public, must-revalidate, proxy-revalidate";
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

is there something wrong with my nginx.conf?

1 Answer 1

1

There are issues regarding using if inside a location block.

The try_files statement is not executed when the if ($request_method = 'GET') block is selected to process the request.

You can fix the problem by replacing the try_files statement with another if statement.

For example:

location / {
    if (!-e $request_filename) { rewrite ^ /index.html last; }
    if ($request_method = 'OPTIONS') { ... }
    if ($request_method = 'POST') { ... }
    if ($request_method = 'GET') { ... }
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.