Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Scripts upgrade now proxies local assets, giving 404 #9126

Comments

@jasonsturges
Copy link

jasonsturges commented Jun 8, 2020

After upgrading from React Scripts v3.1.1 -> v3.4.1 my http-proxy-middleware now forwards all requests to the proxy, failing to load local assets.

Previously, assets in my public/ folder would local locally.

Now, assets in my public folder are proxied, failing to load with 404 not found.

Environment:
CRA App: port 3001
Ruby server: port 3000
Phoenix Elixir socket server: port 4002

CRA app is set to port 3001 via a .env file:

PORT=3001

CRA app defines proxy in package.json:

{
  "proxy": "http://localhost:3000",
  "homepage": "/homepage/",

CRA configures web socket proxy as:

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

module.exports = function(app) {
  app.use(createProxyMiddleware("/socket", { target: "ws://localhost:4002", ws: true }));
};

Which terms did you search for in User Guide?

create react app proxy local assets middleware 404 public upgrade

Environment

CRA App: port 3001
Ruby server: port 3000
Phoenix Elixir socket server: port 4002
Node v12.7.0
macOS 10.14.6 Mojave
React v16.13.1
React Scripts v3.4.1
React Router DOM v5.2.0
Http Proxy Middleware v1.0.4

Expected behavior

Before the upgrade, local assets were not proxied and loaded without issue.

All remaining requests were correctly proxied.

Actual behavior

After the upgrade, local assets in the public/ folder are proxied and result in 404 as they are not found from the proxied server.

Besides the public folder issue, all remaining requests are still proxied correctly.

@jasonsturges
Copy link
Author

jasonsturges commented Jun 12, 2020

Apparently before specifying root "/path" accounted for the proxy, as in:

src="/path" -> src="/homepage/path"

Now, if I specify a root path, I actually go to the root:

src="/path" -> src="/path"

So, I need to treat urls as relative:

src="path" -> src="/homepage/path"

@lock lock bot locked and limited conversation to collaborators Jun 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.