score:29
so the issue was since both the node dev environment and the django dev environment were running in separate docker containers, so localhost
was referring to the node container, not the bridged network.
so the key was to use container links, which are automatically created when using docker-compose
, and use that as the hostname. so i changed it to
"proxy": {
"/api": {
"target": "http://django:8000"
}
},
and that worked, as long as you launch both containers with the same docker-compose
command, otherwise you have to manually specify external_links in your docker-compose.yml
file.
score:0
the correct answer will be to use manual proxy with
- target = docker address
django:4000
- correct host header
localhost:8000
because if django uses reverse
function which returns absolute url
reverse('preview-mail', args=[mail.pk],request=request)
you need to have correct host header for it, or you may get the result url like https://django:4000/your-url`
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
proxy('/api', {
target: 'http://django:4000',
changeorigin: true,
secure: false,
pathrewrite: {
'^/api': ''
},
onproxyreq: function (proxyreq, req, res) {
proxyreq.setheader("host", 'localhost:8000')
}
})
)
}
score:0
if you're working on a mern stack app, make sure you're not in the client folder. you need to be in the root. while in the root, run this command in the terminal. npm run start:dev
score:1
could see the error after upgrading yesterday docker
to version v19.03.13
(on mac
), restarting docker
fixed the issue. the application also runs node.js
/react
, but not django
. basically, i had issues with connection to mongodb atlas
related to authentication/fetching anything from the cloud database.
score:1
choosing the exact value for localhost to populate the "target" property is mostly the solution (it can be localhost, 127.0.0.1, [::1] ).
a mac user should type in terminal to get the solution:
sudo lsof -itcp -stcp:listen -n -p
score:2
if your on a newer version cra 2.0+ you'll need to do this via a manual proxy. https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually
score:2
didn't actually get the answer here i was looking for but had an alternative solution work for me. i think it's specifically related to node v17, as that's when it started happening for me but the solution was pretty simple.
i updated:
"proxy": "http://localhost:8000"
to:
"proxy": "http://127.0.0.1:8000"
in case it's relevant (i don't think it is) - i was proxying to a django server.
score:3
if you don't feel like setting up docker compose, you can also use a docker network:
create network and run docker containers within that network
docker network create webapp_network
docker run -d -p 5000:5000 --name webapp_backend --network webapp_network webapp_backend_image
docker run -d -p 3000:3000 --name webapp_frontend --network webapp_network webapp_frontend_image
added a line in package.json of my frontend react webapp:
"proxy": "http://webapp_backend:5000"
note you can now refer to your backend using the container name instead of localhost
score:11
i faced a similar issue but in mac machine. i changed localhost
to 127.0.0.1
in the package.json and that worked for me as below:
"proxy": "http://127.0.0.1:5000"
score:15
i'm running into the same problem as well. most search results mention adding "secure": false
or "ignorepath": true
to your proxy config. something like this:
"proxy": {
"/api/*": {
"target": "http://localhost:8000",
"secure": false
}
},
may be worth a try but unfortunately none of this worked for me. although each address (http://localhost:3000 and http://localhost:8000) work completely fine in the browser, maybe since the container is actually proxying it needs to use a docker address?
edit--
alright i think i figured it out. i believe it did have to do with the container to container communication. looking in your docker-compose
, your api server is called django
. change your package.json file to this:
"proxy": {
"/api/*": {
"target": "http://django:8000",
"secure": false
}
}
Source: stackoverflow.com
Related Query
- React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)
- Socket IO with React and Express. ReactJS Error: Could not proxy request /socket.io/?EIO=4..... from localhost:3000 to http://127.0.0.1:4000
- How to fix "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" error in react app with nodejs api
- Error React Proxy error: Could not proxy request
- React + Express: Proxy error: Could not proxy request /total from localhstem_errors
- Could not proxy request /pusher/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED)
- ReactJS could not proxy request from localhost:3000 to localhost:3003
- Could not proxy request from localhost:3000 to localhost:7000 ReactJs
- Keep getting "Proxy error: Could not proxy request" error after adding proxy to react package.json
- Proxy error: Could not proxy request /api/register from localhost:3000 to http://localhost:8000/ (ECONNREFUSED)
- Proxy error: Could not proxy request /payment from localhost:3000 to https://localhost:5000/
- React, getting could not proxy request error
- React App Proxy Error: Could Not Proxy Request
- Proxy request error when trying to send post request from React to Node, proxy is working fine on get requests
- Http request to the call to API not working in React
- Propagate function error from parent component to child component in React while making API request
- http-proxy-middleware proxy is not working in React js and Spring Boot project. GET API is return 415 status error
- Proxy error: Could not proxy request /api/house-listing from localhost:3000 to http://localhost:5000? (ECONNRESET), MERN
- Name error data is not defined when sending POST request values from react to flask
- POST to API from React frontend is not working -- Error 400
- React Js Axios Post Request not receiving body back from web api
- Proxy error: Could not proxy request /logout from localhost:3000 to http://127.0.0.1:4444
- Could not proxy request /user/register from localhost:3000 to http://localhost:3002/
- "React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:5000 (ECONNREFUSED)'? Error.. No solution online
- React/Express App - API Requests to Backend Proxy error: Could not proxy request (ECONNRESET)
- How to bypass CORS error when sending POST request to Google Drive API from react application?
- React Context API not working from custom NPM component library
- React Native on Ipad - Error - could not connect to development server
- React Native 0.31: Could not get BatchedBridge Error
- React and Flux: "dispatch in the middle of a dispatch" to show error message from an API call
More Query from same tag
- Setting the initial state of redux in reducers
- Uncaught Invariant Violation: Objects are not valid as a React child
- Arrange entrypoint for firebase.json file in github workflow
- Onclose of a modal, how to get focus back to the interactive element clicked on? React Js
- Getting documents with ID from firstore collection React
- how to add style (add bottom border )in all li in react?
- how to append new component in reactjs not being bundled
- React Router v6 - Using NavLink but getting No routes matched location "/"
- Spring boot Unexpected character % code 37
- TMDB API elements are not displaying on screen - React
- How to type an async fetch in a function?
- When click in one element, the other ones disable in React JS
- Remove <div class="container"> between Navbar and Navbar.Header React Bootstrap
- React directly renders array without looping
- React Route does not work with nested URLs
- Best way to render components server-side? (No client-server linked, only on server)
- ES6 object namespacing
- How do you create a multi-page application using React?
- React.JS, how to edit the response of a first API call with data from a second API call?
- custom palette not working in react js material ui
- fix missing dependency warning when missing an object in useEffect React Hook?
- How can I use grid layout with Fluent UI React
- function for filter data does not work after first use
- Programmatically create Gatsby pages from Contentful data
- React - Default state
- How i can to convert array to object of array in react?
- React - Populate UserManagerSettings Using External Configuration
- react native createbottomtabnavigator hide tab bar label
- How to build debug apk in react native
- React: How I can change a state variable based on the value of another state variable?