刷新页面vue/nginx后404答案

【问题标题】：404 after refreshing page vue/nginx刷新页面vue/nginx后404
【发布时间】：2021-03-08 12:34:46
【问题描述】：

我查找了这个错误，并在 vue 中找到了使用历史模式并在 nginx 位置块中重定向的解决方案。我这样做了：

nginx：

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name tests.test;
        return 302 https://$server_name$request_uri;
}
server{
        # SSL configuration
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

        include snippets/self-signed.conf;
        include snippets/ssl-params.conf;

        location / {
          root /var/www/client/pvapp-client/dist;
          index index.html index.htm;
          try_files $uri $uri/ /index.html;
          ...

在我的 vue 路由器中：

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
     {
      path: '/app',
      name: 'app',
      component: Application
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings
    },

    // otherwise redirect to home
    {
      path: '*',
      redirect: '/'
    }
  ]
})

我仍然从试图提供不存在的路由的服务器收到错误。

vue错误日志也是警告：

“/var/www/client/pvapp-client/dist/app”失败（2：没有这样的文件或目录）

【问题讨论】：

标签： vue.js nginx

【解决方案1】：

好的，我明白了。不知何故，此设置的 GET 部分产生了问题。不知道为什么。只需评论它，一切正常：

if ($request_method = 'OPTIONS') {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

  # Custom headers and headers various browsers *should* be OK with but aren't

  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';
#}

【讨论】：