I am basically a webpack newbie and here's the issue I have come accross. I was following a tutorial on how to set up a proxy url in webpack and used this syntax:
proxy: {
'/api/*': {
target: 'http://localhost:5000',
secure: false
}
},
But this gives me this error!
The tutorial i was following was before webpack 4 came out so I think webpack 4 has some other way of doing it.
Heres what i want to achieve:
* I have a webpackdev server on port 8080 and my express backend is listening on port 5000 i want fetch requests like api/ to go to 5000/api instead of 8080/api.
I hope you guys can help
I fixed this issue with the following code:
devServer: {
proxy: {
'/api/*': {
target: 'http://localhost:5000',
secure: false
}
},
},
Related
I'm trying to implement hot reloading in my company's project. The projet works with React, Redux and .NET with Serverside Rendereing (SSR). I want my project to hot reload when I'm working on my React and SCSS files and keep my state as is (so I don't have to redo the clicks etc. on my app).
To achieve that, I tried to use the devServer conf from Webpack, like so :
devServer: {
static: distFolder,
devMiddleware: {
writeToDisk: true,
serverSideRender: true,
publicPath: distFolder
},
proxy: {
context: () => true,
target: 'http://localhost:5000',
},
hot: true,
port: 3000
},
The webpack dev server is running well, but I have an error on my app :
Error
Note that I tried several options, with or without proxy, with or without serverSideRender, with or without static... I can't find any way to solve this on the webpack documentation, so I'm looking for people who had the same issues and who managed to resolve it.
Thanks !
I'm dealing with an Angular 1 application that uses URI fragments for routing purposes.
For example:
http://localhost:3000/#/home
http://localhost:3000/#/menu
http://localhost:3000/#/list
Rather than:
http://localhost:3000/home
http://localhost:3000/menu
http://localhost:3000/list
When I'm using Webpack Dev Server to launch a local server with hot reloading, every time I apply some changes, Webpack reloads the URL but keeping the "/#/route" part.
Unfortunately, due to some code restrictions, I need to always reload the page from "/" because some redirections are applied internally when the app launches the first time and the app will crash if you try to start directly from any URI fragment.
I tried to use the "proxy" and "historyApiFallback" configurations in webpack.config.js like:
devServer: {
proxy: {
'/#': {
target: 'http://localhost:3000',
pathRewrite: { '^/#': '' }
}
}
And:
devServer: {
historyApiFallback: {
verbose: true,
rewrites: [{ from: /^\/#/, to: '/' }]
}
}
But so far, I didn't have any luck. The URL keeps the hash when reloading.
Any suggestions or ideas to configure Webpack Dev Server to always start from "/" and remove the hash URI?
I'm trying to config my Docusaurus web app to proxy the request to my api endpoint. For example, if I make a fetch request in my app fetch(/api/test), it will proxy the request from localhost:3000/api/test to my {{api_endpoint}}/api/test, but I'm still struggling to do it.
What I've done:
add a proxy field in package.json
create a setupProxy.js in the src folder
These 2 are based on the Proxying API Requests in Development
Another approach way is I created a custom webpack plugin and add it to the Docusaurus config
Does anyone have experience on this problem ? Thanks for reading, I really appreciate your help.
I went down the exact same path. Ultimately Docusaurus runs its Webpack dev server under the hood which is why the proxy field and setupProxy.js were not working as expected. I was able to get the outside API call by proxy and solved CORS errors by creating a Docusaurs plugin like you are attempting. Adding the "mergeStrategy" and "changeOrigin" were the keys to getting it all working.
// plugins/webpack/index.js
module.exports = function (context, options) {
return {
name: "cusotm-webpack-plugin",
configureWebpack(config, isServer, utils) {
return {
mergeStrategy: { "devServer.proxy": "replace" },
devServer: {
proxy: {
"/YOUR_COOL_ROUTE": {
target: "https://YOUR_COOL_API/",
secure: false,
changeOrigin: true,
logLevel: "debug",
},
},
},
};
},
};
};
I'm trying to make a web app using rocket for the backend and react for the frontend. However, when I try to make a proxy I keep getting rayk#pop-os:~/repos/homrs/frontend$ curl http://localhost:3000/api Proxy error: Could not proxy request /api from localhost:3000 to http://localhost:8000 (ECONNREFUSED).
The things I've currently tried are adding "proxy": "http://localhost:8000" to my package.json in the application and I've always tried configuring the proxy manually as suggested here https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually.
Here is the backend code I'm using to test:
#![feature(proc_macro_hygiene, decl_macro)]
#[macro_use] extern crate rocket;
#[get("/")]
fn index() -> &'static str {
"Hello, world!"
}
fn main() {
rocket::ignite().mount("/api", routes![index]).launch();
}
Here is the setupProxy.js I attempted to use
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8000',
changeOrigin: true,
})
);
};
I also have attempted to use http://localhost:8000 and http://localhost:8000/. I have also tried changing the rocket port from 8000 to 3001 and that also did not work.
Edit: Here is a link to the github repo: https://github.com/GimpFlamingo/homrs
The people here: https://github.com/plouc/mozaik/issues/118 were having a similar issue.
I was able to reproduce your issue and found adding address = "127.0.0.1" to Rocket.toml and then setting "proxy" to "http://127.0.0.1:8080" fixed it for me!
So I have an appengine webapp which includes cloud endpoints deployed locally on port 8888.
The error message in the title occurs on startup of our webpack-dev-server which runs on port 3000 and proxies all requests starting with /_ah/api/* to http://localhost:8888. The exact console error is as follows:
The odd thing is, when I open this url in another tab and switch the port to 8888 the request comes through, and the webpack-dev-server can also proxy the requests to the backend from then on.
Most other issues I read on this suggested setting the appengine config in gradle to the following:
httpPort = 8888
httpAddress = "0.0.0.0";
However I already did that so that does not seem to be the issue.
My relevant webpack config is as follows:
module.exports = webpackMerge(commonConfig, {
...
output: {
...
publicPath: 'http://localhost:3000/'
},
devServer: {
port: 3000,
open: true,
proxy: {
'/_ah/api/*': 'http://localhost:8888/'
}
}
});
Some backends don't work properly without changeOrigin: true. You can use it like this:
proxy: {
'/_ah/api/*': {
target: 'http://localhost:8888/',
changeOrigin: true,
secure: false
}
}
If that doesn't work, does the proxy path (/_ah/api/) need to be included in the request? You could try if ignoring the path works:
proxy: {
'/_ah/api/*': {
target: 'http://localhost:8888/',
ignorePath: true
}
}
And if that doesn't work, I would try out removing the last part of the proxy path: /_ah/api/* to /_ah/api. This should do the same, but the first one is deprecated.