404刷新页面vue/nginx后

Question

我查找了这个错误，并在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/pvacp-client/dist/app"；失败(2：没有此类文件或目录(

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