I'm currently trying to proxy my requests from my Vue app so I can send cookies back from the server that exists separate from my frontend.
I have my frontend on port 8080 and server on port 3000. However, when I try to configure my proxy to use port 3000 in Vue using devServer.proxy, it sends the request to 8080 still.
Here is my code in vue.config.js:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://localhost:3000',
ws: true,
changeOrigin: true
}
}
}
}
Here is my axios request:
axios.post(`/api/auth/login/`, loginDetails, {
withCredentials: true,
credentials: 'include'
})
.then(function (response) {
console.log('login response: ', response)
})
.catch(error => {
console.error(error)
});
Here is the error I get that shows the frontend is still sending to 8080:
I also tried using the following in vue.config.js and not having anything prefixed to the request url, but to no avail.
module.exports = {
devServer: {
proxy: 'http://localhost:3000'
}
}
Here is the documentation that I am using https://cli.vuejs.org/config/#devserver
Solution:
After taking a look at the server logs, I found out that the proxy was working and it was trying to find the /api/auth/login route on my server. However, I only had /auth/login so the server sent the 404 status.
I'm not sure if this is the correct way to do this, but I simply prepended the server route with /api and it worked like so:
app.use('/api/auth', authRouter)
Previously it looked like this:
app.use('/auth', authRouter)
Thank you to Estus Flask for the tips in the comments.
Related
TLDR: how do I customize the "Error occurred while trying to proxy: localhost:3000/" in http-proxy-middleware?
I'm using the node package http-proxy-middleware as a proxy.
I have some patterns where I know that the proxying will fail.
Here is a minimal example of what happens:
const { createProxyMiddleware } = require('http-proxy-middleware');
require('express')().use(
'/',
createProxyMiddleware({
target: 'http://failhtis/'
})
).listen(3000);
This will display this in my browser :
And in my console :
[HPM] Error occurred while proxying request localhost:3000/ to http://failhtis/ [ENOTFOUND] (https://nodejs.org/api/errors.html#errors_common_system_errors)
What I would love to do is generate a custom message / html for the error. How do I manage that?
I've tried the ejectPlugin method described here : https://github.com/chimurai/http-proxy-middleware#ejectplugins-boolean-default-false but without success.
To sum up: I know error will happen in my setup, how do I send a custom answer instead of the "Error occured while proxying..." message?
I just found the answer to my question.
Here it is for v2
const { createProxyMiddleware } = require('http-proxy-middleware');
console.log(Options)
require('express')().use(
'/',
createProxyMiddleware({
target: 'http://sc_rstudio/',
changeOrigin: true,
logLevel: 'debug',
onError: (err, req, res) => {
console.log("pouet")
res.send('<h1>Something went wrong.</h1>');
},
})
).listen(3000);
This is my middleware file known as setupProxy.js.
I have my express server running on port 5000, I also have my app using '/todos';
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
console.log('Proxy setup');
app.use(
'/testing',
createProxyMiddleware({
target: 'http://localhost:5000/todos',
changeOrigin: true,
})
);
};
I do an api call
await axios.get('/testing/home', {validateStatus: false})
.then(async (response) => {
}
This throws an error
GET http://localhost:5000/testing/home 404 (Not Found)
Why is my proxy not pushing /testing/home to localhost:5000/todos/home?
I have the setupProxy.js file in the src folder, the package json is separated from my servers package.json file. Am I supposed to proxy from the backend instead of the front-end or something? I can get all normal requests for /todos/* from my front-end so it just seems like the proxy isnt working at all.
I have two servers running in my backend, because of that I have to use the http-proxy-middleware package but I am encountering some problems.
This is my code in the frontend which is running on localhost:3000
axios("/api2/login",data)
.then((res) => {
});
This is my code in the backend which is running on localhost:5001
const { createProxyMiddleware } = require('http-proxy-middleware');
app.use(createProxyMiddleware('/api2', {target: 'http://localhost:5001', changeOrigin: true}))
app.post("/login", (req, res, next) => {
res.send("Logged In");
});
This code is no working showing this error in the browser's console
GET http://localhost:3000/api2/login 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)
I am not able to understand where I am going wrong.
Looks like it's hitting localhost:3000 instead of localhost:5001 which is where your server is running from.
axios("http://localhost:5001/api2/login",data)
.then((res) => {
});
You can also set the baseURL in axios. HTTP get request with Axios gets sent with the local host IP at the beginning of the URL
If I understand correctly your server is listening on port 5001. So, you need to proxy your requests from 3000 to 5001. You can do that in the react application by setting the proxy value in package.json:
"proxy": "http://localhost:5001",
For more information about this subject, check the docs.
Edit for the configuration explained in the comment section
First in package.json:
"proxy": "http://localhost:5002",
Create a new server (proxyserver) which will be listening in port 5002:
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
// redirection for first server 5000
app.use('/api1', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true }));
// redirection for second server 5001
app.use('/api2', createProxyMiddleware({ target: 'http://localhost:5001', changeOrigin: true }));
app.listen(5002);
For the other servers (5000 and 5001) you don't need to redirect the requests. Just make sure they're listening on the right ports (5000 and 5001), for example:
const express = require('express');
const app = express();
app.post("/api2/login", (req, res, next) => {
res.send("Logged In");
});
app.listen(5001);
I followed the steps mentioned in this post along with some changes,
I changed my Axios request code to:
axios({
method: "POST",
data: user,
withCredentials: true,
url: "/api2/login",
}).then((res) => {})
Otherwise, the proxy server was treating it as a GET request.
Secondly, I changed the proxy endpoint code int the proxy server as:
app.use('/api2', createProxyMiddleware({
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {
[`^/api2`]: '',
},
}));
Further information about the proxy endpoint change can be found here.
I'm building a fullstack React application with a Postgres database connected by Express/Node. I'm not using create-react-app. To test API calls, I'm calling the API in componentDidMount() with axios. The server is running on port 3000 and the react application is running on port 8080. I've tested the /users endpoint in Postman to ensure it works.
componentDidMount() {
// failing config for webpack dev server:
axios.get('/api/users')
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log(err);
console.log(err.response)
})
// fails:
// axios.get('/users')
// .then((response) => {
// console.log(response)
// })
// .catch((err) => {
// console.log(err);
// console.log(err.response)
// })
// works fine:
// axios.get('http://localhost:3000/users')
// .then((response) => {
// console.log(response)
// })
// .catch((err) => {
// console.log(err)
// })
}
Note that calling localhost:3000 directly works, but I want to be able to call /users to prepare for a production environment. So I added the following in my webpack.config.js file:
devServer: {
contentBase: __dirname,
hot: true,
historyApiFallback: true,
open: true,
proxy: {
'/api': 'http://localhost:3000',
changeOrigin: true
}
}
Is there something else I need to add for proxying API calls when running webpack-dev-server? From the tutorials I've seen, having the proxy configuration in webpack.config.js is sufficient, but I'm only getting 404s.
Thanks in advance.
The solution, at least for me, ended up being using react environment variables that will dynamically determine the url to point to. I followed this tutorial: https://medium.com/#trekinbami/using-environment-variables-in-react-6b0a99d83cf5. Just point your dev env to localhost and then whatever port your server is on.
I am trying to fetch some data from the development server using React.
I am running the client on localhost:3001 and the backend on port 3000.
The fetch request :
const users = fetch('/api/users');
users.then((err,res) => {
console.log(res);
})
When I run my development server and webpack-dev-server I get the following output:
GET http://localhost:3001/api/users 404 (Not Found)
I tried specifying the proxy in the package.json so it would proxy the request to the API server, however nothing has changed.
Here is my package.json file:
.. and the webpack.config :
Please tell me, if you need to see anything else from my project. I apologies, if I'm missing something and not being thorough, I'm still quite new to using these technologies.
You can modify your fetch request API url to give the complete hostname since
fetch('http://localhost:3000/api/users')
also make sure that you have CORS enabled on your backend
In case your want to redirect through webpack, your can try devServer.proxy as
devServer: {
inline: true,
contentBase: './dist',
port: 3001,
proxy: { "/api/**": { target: 'http://localhost:3000', secure: false } }
}
I know I'm a little late to the game here, but I'll leave it here for future reference.
To make the devServer proxy work as expected, you need to specify the HTTP Accepts header to be something else than "text/html". Do this with the init-object that fetch accepts as the second argument. A simple example:
fetch("/api/profile",{
headers:{
"accepts":"application/json"
}
})
.then(res => {
console.log(res);
return res.json();
})
.then(json => console.log(json) )
.catch( a => { console.log(a) });
The reason for this is that the WebPack Dev Server normally uses a context/namespace to differentiate between what to serve and what to forward. The create-react-app scripts do not extract a namespace from the proxy path in the package.json file. Instead the scripts has the opinionated default behaviour that any request using something else than HTTP GET will get forwarded. Also, anything using HTTP GET, but NOT text/html as the Accepts header will get forwarded.
The reasoning is because most React Apps are SPA (Single Page Applications) which use AJAX/Fetch to communicate with some API. API's normally use JSON or XML, but not text/html.
In the package.json
"proxy": {
"/api/users": {
"target": "http://localhost:3000"
}
},
I had the same problem using axios and was only able to get it working by using the complete hostname and enabling Cors.
const response = await axios.get('http://localhost/users/');
Install cors
npm i cors
Use cors
const express = require("express");
const request = require("request");
const cors = require("cors");
const app = express();
app.use(cors());
app.use("/", (req, res) => {
//...
});
app.listen(80, () => {
console.log("CORS-enabled web server listening on port 80");
});
Ref
The solution by user jellyfish-tom in https://github.com/webpack/webpack-dev-server/issues/793#issuecomment-316650146 worked for me.
devServer: {
proxy: {
"*": "http://[::1]:8081"
// "secure": false,
// "changeOrigin": true
}
},
Webpack Dev Server uses devServer.proxy config in your Webpack config to control proxying requests.