Webpack Dev Server Proxy Returns 404

Question

Recently, I've been put into a team. As a freshman, I need to familiarize myself with the project code. The project uses Angular2 and Spring Boot. It also uses Webpack for bundling the assets, including proxy (using Webpack Dev Server). Due to the scale of the application, the proxy is used to connect to various backend servers.

The proxy is there, and my teammates' computers seem to run it just fine. Unfortunately, my computer doesn't seem to read the proxy. Here's the proxy file (the http:// is there before each proxy target. My reputation doesn't allow me to post more than two links):

devServer: {
    proxy: 
    {
        '/node': {
            target: 'localhost:8080/',
            pathRewrite: {'^/node' : ''},
            secure: false
        },
        '/apiv1': {
            target: 'localhost:8080/', //[dev]8080 
            pathRewrite: {'^/apiv1' : ''},
            secure: false
        },
        '/apiv2': {
            target: 'localhost:8081/',
            pathRewrite: {'^/apiv2' : ''},
            secure: false
        },
        '/apiv3': {
            target: 'localhost:8082/',
            pathRewrite: {'^/apiv3' : ''},
            secure: false
        },
        '/apiv4': {
            target: 'localhost:8083/',
            pathRewrite: {'^/apiv4' : ''},
            secure: false
        },
        '/apiv5': {
            target: 'localhost:7080/',
            pathRewrite: {'^/apiv5' : ''},
            secure: false
        }
        ,
        '/apiv6': {
            target: 'localhost:8084/',
            pathRewrite: {'^/apiv6' : ''},
            secure: false
        },
        '/apiv7': {
            // target: 'localhost:8081/', // local
            target: 'http://localhost:8085/',
            pathRewrite: {'^/apiv7' : ''},
            secure: false
        },
        '/apiv8': {
            target: 'localhost:8086/',
            pathRewrite: {'^/apiv8' : ''},
            secure: false
        }
    },
    historyApiFallback: true,
    stats: 'minimal'
}

Unfortunately, whenever try to access the API URL (say, 'localhost:8050/apiv8/service/012997JX/accounts'), I get a 404 Error:

Request URL: http://localhost:8050/apiv8/service/012997JE/accounts
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:8050
Referrer Policy: no-referrer-when-downgrade

However, I know that it's not the fault of the backend. I've tried accessing 'localhost:8086/service/012997JE/accounts'and it returned me the desired object. Also, when running npm start, the proxy doesn't seem to be built:

> btpn-fes@1.0.0 start C:\IT170517\fes-service-maintenance-sample\frontend
> webpack-dev-server --inline --progress --port 8050

70% 4/4 build modules
http://localhost:8050/
webpack result is served from http://localhost:8050/
content is served from C:\IT170517\fes-service-maintenance-sample\frontend
404s will fallback to /index.html                                                                                            
chunk    {0} app.js (app) 1.72 MB {3} [rendered]
chunk    {1} env.js (env) 153 bytes {2} [rendered]
chunk    {2} polyfills.js (polyfills) 475 kB [rendered]
chunk    {3} vendor.js, vendor.css (vendor) 4.47 MB {1} [rendered]
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 806 bytes [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 360 kB [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 10.2 kB [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 81.3 kB [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 43.1 kB [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 46.9 kB [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 439 kB [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 30.7 kB [rendered]
webpack: Compiled successfully.

In case you're wondering, I'm running the following webpack:

• webpack: 1.13.0
• webpack-dev-server: 1.14.1
• webpack-merge: 0.14.0

Is there something wrong in my proxy configuration?

Thanks for the help.

Answer 1

Well, I've finally solved the problem by upgrading to another Webpack version. I now use the following Webpack configuration:

"webpack": "1.15.0",
"webpack-dev-server": "1.16.5",
"webpack-merge": "0.14.1"

along by downgrading my nodeJS version to 6.10.3 LTS.

Hope this helps.