javascript - React App Not Loading When Using http-proxy-middleware - Stack Overflow

admin管理员组

文章数量:1429937

Alright, I've about reached the end of my sanity on this one.

So, I have a basic React frontend w/ an Express backend. React is running off of localhost:3000, the backend is running off of localhost:3030. Following along on a guide for setting up some Spotify integration, everything works fine up until I hit the portion on setting up a proxy. (I have a slightly different setup from the Spotify guide, all my stuff runs through /spotify/auth rather than /auth)

I installed http-proxy-middleware, created the setupProxy.js in my /src folder, and if I ever try to load up localhost:3000 as normal, I get nothing-- my app doesn't load at all.

The only way to have the app appear again is to remove the file. The one on the spotify guide is a bit out of date as far as I can tell anyway, but even using suggestions found elsewhere, I've gotten no luck. Here is the current setup I have for my setupProxy.js file:

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/spotify/**",
    createProxyMiddleware({
      target: "http://localhost:3030",
      changeOrigin: true,
    })
  );
};

I've even removed the actual fetch that would be making use of the proxy and still have no luck loading my page. I am also unable to use "proxy": "http://localhost:3030" in my package.json as it throws:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

- options.allowedHosts[0] should be a non-empty string."

Alright, I've about reached the end of my sanity on this one.

So, I have a basic React frontend w/ an Express backend. React is running off of localhost:3000, the backend is running off of localhost:3030. Following along on a guide for setting up some Spotify integration, everything works fine up until I hit the portion on setting up a proxy. (I have a slightly different setup from the Spotify guide, all my stuff runs through /spotify/auth rather than /auth)

I installed http-proxy-middleware, created the setupProxy.js in my /src folder, and if I ever try to load up localhost:3000 as normal, I get nothing-- my app doesn't load at all.

The only way to have the app appear again is to remove the file. The one on the spotify guide is a bit out of date as far as I can tell anyway, but even using suggestions found elsewhere, I've gotten no luck. Here is the current setup I have for my setupProxy.js file:

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/spotify/**",
    createProxyMiddleware({
      target: "http://localhost:3030",
      changeOrigin: true,
    })
  );
};

I've even removed the actual fetch that would be making use of the proxy and still have no luck loading my page. I am also unable to use "proxy": "http://localhost:3030" in my package.json as it throws:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

- options.allowedHosts[0] should be a non-empty string."

• javascript
• node.js
• reactjs
• package.json
• http-proxy-middleware

Share Improve this question Follow edited Apr 10, 2022 at 23:25 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Apr 10, 2022 at 23:20 FreyCFreyC 5111 silver badge33 bronze badges 4

• Any reason you're using the full proxy middleware? Simply adding "proxy": "http://localhost:3030", to your package.json should be enough – Phil Commented Apr 10, 2022 at 23:28
• 1 Mentioned that in the question-- for whatever reason, adding that line to package.json throws a pletely different error when I start the app up, "Invalid options object. Dev server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string." – FreyC Commented Apr 10, 2022 at 23:30
• Did you use create-react-app to bootstrap your frontend app? What versions of react-scripts and other React dependencies do you have in your package.json? Have you tried a fresh install, eg rm -r node_modules package-lock.json && npm install (or the yarn equivalents)? – Phil Commented Apr 10, 2022 at 23:33
• Managed to resolve the issue on my own. Due to habit from another couple projects I had "type": "module" in my package json, thus using import statements rather than requires. Even when using the correct format for the setupProxy, it would still give me the issue, so I instead tried removing it and switching back to requires and suddenly it works. – FreyC Commented Apr 10, 2022 at 23:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Managed to solve my problem, though I am still unsure of why it works.

The issue I was running into stems from using "type": "module" in the package.json. I was using correct import statements in all of my backend, as well as tried to use it for the setupProxy.js as well, however this would always result in the issue from the question. After removing the line and swapping out the imports for requires in my backend, everything started working.

It seems like a strange patibility issue, but there's probably a much better explanation.

Had the same problem as you where my react app wasn't loading because of http-proxy-middleware. Different problem/solution, but for people that also had this problem, and were following this youtube video https://www.youtube./watch?v=hxyp_LkKDdk

The tutorial has

const proxy = require("http-proxy-middleware")

instead of

const {createProxyMiddleware} = require("http-proxy-middleware")

After I made that change, my issue was solved. Don't forget to change "proxy" to "createProxyMiddleware" in app.use() as well

devServer{
onBeforeSetupMiddleware: function(app) {
          setupProxy(app);
        }
}

本文标签： javascriptReact App Not Loading When Using httpproxymiddlewareStack Overflow