网站可以在笔记本电脑浏览器上运行，但不能在移动浏览器上运行

Question

我使用 MERN 堆栈开发了一个 web 应用程序。 这个网站是： www.javascriptmazes.com 。 出于某种原因，当我在笔记本电脑的浏览器上打开该链接时，一切正常。 但是，当我尝试在我的移动（三星）手机上打开同一个网站时，页面无法正确加载，我最终只看到浏览器的白色背景。

我不知道如何在手机上进行调试，因为我总是在笔记本电脑上进行调试。 但是我去了这个网站https://www.mobilephoneemulator.com/并尝试在模拟器上加载上述 web 链接，显示的错误消息是：

Mixed Content: The page at ' https://www.mobilephoneemulator.com/ ' was loaded over HTTPS, but requested an insecure stylesheet ' http://www.javascriptmazes.com/static/css/main.1e4202c6.css '. 此请求已被阻止； 内容必须通过 HTTPS 提供。 emulate.php?url=http%3A//javascriptmazes.com&user_agent=Mozilla/6.0 (iPhone%3B CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/536.26 (KHTML%2C like Gecko) Version/8.0 Mobile/10A5376e Safari/8536.25 &device=Apple-Iphone6:1 Mixed Content: The page at ' https://www.mobilephoneemulator.com/ ' was loaded over HTTPS, but requested an insecure script ' http://www.javascriptmazes.com/static/js/ main.5d7eb463.js '。 此请求已被阻止； 内容必须通过 HTTPS 提供。

如何通过 HTTPS 提供内容？ 以及我如何知道哪些具体内容需要更改？

I'm using MERN....so my client side uses React....also if you look at the web app I use alot of HTML canvas and scripts to draw on the HTML canvas....I don't know如果这是否相关，但只是想提一下以防万一......

如何解决这个问题？

Answer 1

您在手机（三星）上看到的白页是人们在 Windows 上的 Chrome 中看到的。 我将学习如何使用远程调试工具，而不是尝试使用模拟器。

Answer 2

好的，我发现了问题。 Redux 开发工具导致了这个问题。 我将其更改为：

var store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

      )
     );

至：

var store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
      )
     );

它现在可以在我的手机上运行......