I need assistance setting up a proxy using WebpackDevServer in my React/Node chrome extension. Currently, my server is running on localhost:4000, and the React frontend is on localhost:5000.
When trying to access the route /api/user/ticket using Axios, I am encountering an issue. The request is not being proxied through localhost:4000, but instead hitting the route of my chrome extension:
chrome-extension://fjkfhdsjkwerjhdksfhdjkshfds/api/ticket/user/If I explicitly call localhost:4000/api/user/ticket, everything works properly. As I am new to webpack, I am unsure of what mistake I might be making. Any assistance would be highly appreciated. Thank you!
The webserver proxy has been implemented based on the information provided in the documentation
var server = new WebpackDevServer(
{
https: false,
hot: false,
client: false,
proxy: {
'/api': 'http://localhost:4000',
},
host: 'localhost',
port: env.PORT,
static: {
directory: path.join(__dirname, '../build'),
},
devMiddleware: {
publicPath: `http://localhost:${env.PORT}/`,
writeToDisk: true,
},
headers: {
'Access-Control-Allow-Origin': '*',
},
//urgent modification needed to prevent DNS attacks
allowedHosts: 'all',
},
compiler
);