Background

When developing vue projects locally, when you are used to proxyTable solving local cross-domain problems and switch to nuxt, you will I found that adding the proxyTable setting has no effect. That’s because you used the vue scaffolding to generate the vue project, which has already written the relevant proxyTable settings for you. code.

build/dev-server.js

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === &#39;string&#39;) {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

Copy after login

This is in the form of express middleware, and the dependency used is http-proxy-middleware
nuxt is also available The concept of middleware, but this middleware is not express’s middleware, so how do we add it to nuxt?

How to do it

First, install the dependencies

npm install --save-dev express http-proxy-middleware

Copy after login

Then create a file server.js

const { Nuxt, Builder } = require(&#39;nuxt&#39;)
const app = require(&#39;express&#39;)()
var proxyMiddleware = require(&#39;http-proxy-middleware&#39;)
var config = require(&#39;./nuxt.config&#39;)
// 我们用这些选项初始化 Nuxt.js：
const isProd = process.env.NODE_ENV === &#39;production&#39;
const nuxt = new Nuxt({ dev: !isProd })
// 生产模式不需要 build
if (!isProd) {
  const builder = new Builder(nuxt)
  builder.build()
}

// proxy api requests这里就是添加的proxyTable中间价的设置了
var proxyTable = config.dev.proxyTable
Object.keys(proxyTable).forEach(function (context) {
    var options = proxyTable[context]
    if (typeof options === &#39;string&#39;) {
      options = { target: options }
    }
    app.use(proxyMiddleware(options.filter || context, options))
  })
app.use(nuxt.render)//这里是添加nuxt渲染层服务的中间件



app.listen(3000)
console.log(&#39;Server is listening on http://localhost:3000&#39;)

Copy after login

## in the root directory #Then add the following code in

nuxt.config.js

module.exports = {
    dev: {
    proxyTable: {
          &#39;/api&#39;:
            {
                target: &#39;http://localhost:7001&#39;, // 
                pathRewrite: { &#39;^/api&#39;: &#39;/&#39; }
            }
        }
      }
}

Copy after login

and then

node server.js run it. If you find it inconvenient to run, you can also add the command to the
package.json file.

{
     "scripts": {
        "dev": "nuxt --port=8080",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint",
        "server": "node server.js"
    }
}

Copy after login

Related recommendations:

How to add videos to the website

How to add cookies to the http request header

The above is the detailed content of How to add proxyTable proxy in nuxt?. For more information, please follow other related articles on the PHP Chinese website!