[SOLVED] Proxy stopped working

Help Requests
1

I updated most packages and proxy stopped working. Any ideas from looking at the below as to what could be the problem?

Here, you can see the proxy is configured:

$ npm run start

> myapp@1.0.0 start
> webpack-dev-server --env extractCss

<i> [webpack-dev-server] [HPM] Proxy created: /api  -> http://localhost:3000/
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.150:4000/

Server api is running:

Server running at: http://localhost:3000

Aurelia is running on port 4000 (aurelia_project/aurelia.json):


  "platform": {
    "id": "web",
    "displayName": "my website",
    "index": "src/index.ejs",
    "port": 4000,
    "host": "localhost",
    "output": "dist",
    "hmr": true,
    "open": false
  },

Proxy is configured on 3000 (webpack.config.js):

  devServer: {
    index: '', 
    contentBase: outDir,
    clientLogLevel: 'debug',
    historyApiFallback: true,
    open: project.platform.open,
    hot: hmr || project.platform.hmr,
    port: port || project.platform.port,
    host: host,
    proxy: [
      {      
        path: '/api',
        target: "http://localhost:3000/",
        secure: false,
        changeOrigin: true,
        onProxyReq: proxyReq => {
          if (proxyReq.getHeader('origin')) {
            proxyReq.setHeader('origin', "http://localhost:3000/");
          }
        }
      }
    ]
  },

But POST is going to port 4000, not 3000:

image
image872Ă—361 42.5 KB

Dependencies:

  "dependencies": {
    "@aurelia/fetch-client": "^0.9.0",
    "@popperjs/core": "^2.10.2",
    "@toast-ui/editor": "^3.1.2",
    "@types/quill": "^2.0.9",
    "aurelia-animator-css": "^1.0.4",
    "aurelia-bootstrapper": "^2.3.3",
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "luxon": "^2.3.0",
    "quill": "^1.3.7",
    "quill-blot-formatter": "^1.0.5",
    "quill-delta": "^4.2.2",
    "quill-image-compress": "^1.2.19",
    "quill-mention": "^3.1.0"
  },
  "devDependencies": {
    "@types/bootstrap": "^5.1.8",
    "@types/gulp": "^4.0.9",
    "@types/jest": "^27.4.0",
    "@types/jquery": "^3.5.13",
    "@types/node": "^17.0.8",
    "@types/webpack": "^5.28.0",
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "app-settings-loader": "^2.0.0",
    "aurelia-cli": "^2.0.3",
    "aurelia-loader-nodejs": "^1.1.0",
    "aurelia-pal-nodejs": "^2.0.0",
    "aurelia-testing": "^1.0.0",
    "aurelia-webpack-plugin": "^5.0.3",
    "autoprefixer": "^10.4.2",
    "babel-eslint": "^10.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.2.0",
    "css-loader": "^6.5.1",
    "cssnano": "^5.0.15",
    "cypress": "^9.2.1",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "eslint": "^8.7.0",
    "eslint-plugin-cypress": "^2.12.1",
    "expose-loader": "^3.1.0",
    "file-loader": "^6.2.0",
    "gulp": "^4.0.2",
    "gulp-eslint": "^6.0.0",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jest": "^27.4.7",
    "jest-cli": "^27.4.7",
    "jest-transform-stub": "^2.0.0",
    "mini-css-extract-plugin": "2.4.5",
    "minimatch": "^3.0.4",
    "postcss": "^8.4.5",
    "postcss-loader": "^6.2.1",
    "promise-polyfill": "^8.2.1",
    "sass": "^1.48.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "tree-kill": "^1.2.2",
    "ts-jest": "^27.1.3",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.66.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"
  },
2

Seems to be cors related.

3

I’ve spent a whole day with webpack 5 + proxy.

In my case, when my webpack.config.js proxies to http://localhost:30000 for example, my webpack targets to ::1:3000, rather than 127.0.0.1:3000, because /etc/hosts has two lines on localhost for ::1 and 127.0.0.1.

So, my server should serve both for IPv4 and IPv6, for example

gunicorn -b localhost:3000 -b [::1]:3000 ...

4

Webpack’s migration guides from version to version needs a lot of work. I found a few changes in the configuration files that weren’t noted. A pain in the ass to deal with.

5

@manks Yeah. Have you finished all?

Fortunately(?) I did not refer to the migration guide. I noticed that the latest aurelia-cli generates webpack.config.js for Webpack 5, so I just “au new” with the latest aurelia-cli and merged our webpack.config.js to the generated one.

But, I was surprised because the newly generated webpack.config.js did not work with an error.

Here is my issue report.

A new release of aurelia-cli is expected so that new comers can use Aurelia to love it.

There is another issue. Reloading a deep URL does not load bundles.

6

@HIRANO-Satoshi I pretty much went through all of the existing configurations options and verified they were still valid. For those that didn’t exist, I crossed my fingers and relied on the defaults. haha.

Notable differences where:

optimization.moduleIds: hashed → deterministic

au new used to generate a package script command with --production --extractCss:

  "scripts": {
    "build": "webpack --production --extractCss",
    "start": "webpack-dev-server --extractCss",
    "analyze": "webpack --production --extractCss --analyze",
  }

and the webpack config export was defined as

module.exports = ({ production, extractCss } = {}, {analyze, tests, hmr, port, host } = {}) => ({

The scripts now have to be defined using the --env option:

  "scripts": {
    "build": "webpack --env production --env extractCss",
    "start": "webpack-dev-server --env extractCss",
    "build:dev": "webpack",
    "analyze": "webpack --env production --env extractCss --analyze",
  },

File naming changed hash to fullhash:

 output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[fullhash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[fullhash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[fullhash].chunk.js'
  },

optimization.splitChunks.cacheGroups.vendors was renamed to optimization.splitChunks.cacheGroups.defaultVendors.

devServer.clientLogLevel:debug → devServer.client.logging:error
devServer.index → devServer.static.publicPath
devServer.contentBase → devServer.static.directory

Of course, none of this was documented.

2 Likes