使用HTML5 pushstate URL为单页网站配置nginx

时间:2012-12-11 02:11:06

标签: html5 nginx singlepage

如何配置nginx将所有URL(不带/api或某些静态资源,如JS / images)重定向到index.html?原因是我使用HTML5推送状态URL与单页面应用程序。无论是AJAX还是JS,都会更改含义内容,具体取决于URL

我当前的nginx配置如下:

server {
    listen 2000;
    server_name localhost;

    location / {
        root    /labs/Projects/Nodebook/public;
        index   index.html;
    }

    location /api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://localhost:3000/;
        proxy_redirect off;
    }
}

3 个答案:

答案 0 :(得分:17)

location / {
  try_files $uri /index.html;
}

这将检查所请求的文件是否存在并将其返回。如果该文件不存在,则返回index.html。

http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

答案 1 :(得分:6)

matt答案几乎是一种解决方案,但是如aschepis所指出的那样,它不会为丢失的文件(例如favicon.icon)提供404。

Nginx会选择匹配的第一个位置。所以我们可以先匹配文件(如果文件不存在,将提供404)。并且为所有网址添加了一个默认为index.html的位置。

    location /.+\..+ { # files (assuming they always have a dot)
        # use eg alias to serve some files here
    }

    location / { # url routed by client, client gives 404 for bad urls
        try_files $uri /index.html;
    }

答案 2 :(得分:2)

您需要添加到您的nginx配置文件:

 rewrite ^(.+)$ /index.html last;

然后说你正在使用Backbone.js,只要确保你将任何未定义的路由重新路由到404页面:

  routes: {
    // Other routes
    "*path"  : "notFound"
  },

  notFound: function(path) {
    // Load 404 template, probably of a cute animal.
  }

来源: http://readystate4.com/2012/05/17/nginx-and-apache-rewrite-to-support-html5-pushstate/