Ytukyg

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?

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') { ... }

}