进一步配置Nginx支持HTML5 history state，React browser router

博唯

于 2019-01-10 19:56:02 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Server-end 文章标签： Nginx Webpack

本文链接：https://blog.youkuaiyun.com/flashdelover/article/details/86251702

Server-end 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Nginx和Webpack Dev Server的历史回退（history fallback）配置方法，包括基本配置、优化配置及与index指令兼容的配置方式，确保在请求资源不存在时返回index.html，适用于SPA应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Nginx history fallback配置

基本（能用就行）

  # root /var/www/html;
  location / {
    # ...
    try_files $uri /index.html;
  }

更佳（仅在浏览器接受HTML时才尝试响应后备HTML）

  # root /var/www/html;
  location / {
    # ...
    set $fallback_uri /index.html;
    if ($http_accept !~ text/html) {
      set $fallback_uri $uri;
    }
    try_files $uri $fallback_uri =404;
  }

兼容（与指令index，autoindex并存）

  # root /var/www/html;
  location / {
    index index.html;
    autoindex on;
    # ...
    set $fallback_uri /index.html;
    if ($http_accept !~ text/html) {
      set $fallback_uri /null;
    }
    try_files $uri $uri/ $fallback_uri =404;
  }

WebpackDevServer history fallback配置

在webpack.config.js

基本

module.exports={
  //...
  devServer: {
    //...
    historyApiFallback: true,
  },
};

更佳

module.exports={
  //...
  devServer: {
    //...
    historyApiFallback: {
      htmlAcceptHeaders: ['text/html'], // 仅当浏览器接受HTML时，服务器才响应/index.html
    },
  },
};