NGINX + Vue HTML 模式配置给出 404

Posted 2023-02-22

【中文标题】NGINX + Vue HTML 模式配置给出 404

【英文标题】：NGINX + Vue HTML mode config giving 404

【发布时间】：2019-04-27 04:32:50

【问题描述】：

我有一个 Vue 应用程序在 nginx:alpine 容器内运行，并带有一个自定义 nginx 配置来处理浏览器导航（Vue 路由器的 html 模式）。

问题是根 (/) 以外的任何路径都给出 404，错误消息如下：

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"

我正在使用如下所示的自定义 nginx 配置文件：

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;
        

    

我的 nginx.conf 有问题吗？

【参考方案1】：

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.

您可以通过将try_files 语句替换为另一个if 语句来解决此问题。

例如：

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