react-router的browserHistory/react-router-dom的BrowserRouter刷新頁面404問題解決

前端解決：

• '/' 表示把所有的url都發給代理https://api.example.com
• bypass 表示不需要發給發給代理服務器的條件

　　如下配置，可以監聽https://api.example.com域下的/開頭的請求（等效於所有請求），然后判斷請求頭中accept字段是否包含html，若包含，則代理請求至/index.html，隨后將返回index.html文檔至瀏覽器。

 

proxy: {
  '/': {
    target: 'https://api.example.com',
    secure: false,
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf('html') !== -1) {
        console.log('Skipping proxy for browser request.');
        return '/index.html';
      }
    }
  }
}

 

django后端解決

對於所有后端不存在的url直接返回index.html文檔給瀏覽器

handler404 = view.page_not_found


# 強制刷新前端功能
def page_not_found(request, exception, template_name='index.html'):
    return render(request, template_name)

 

 

參考：

http://blog.codingplayboy.com/2017/12/26/react-router-browserhistory-404/