This is the 15th day of my participation in the August More Text Challenge. For details, see:August is more challenging

In developing a nex.js project, you have to interact with the server, so cross-domain situations are inevitable, but the configuration is not as difficult as expected.

Package. The json configuration

Check whether the environment is different depending on the configuration version. HTTP proxy-middleware is introduced differently from one version to another, and if it’s not introduced correctly, it will be reported because of the version

{
  "name": "jianxl"."version": "0.1.0 from"."private": true."scripts": {

    "dev": "next dev"."build": "next build && PORT=3000 npm start"."start": "next start -p $PORT"."server": "node server.js"."lint": "next lint"
  },
  "dependencies": {
    "axios": "^ 0.21.1"."express": "^ 4.17.1"."http-proxy-middleware": "^ 2.0.1." "."next": "11.0.1"."qs": "^ 6.10.1"."react": "17.0.2"."react-dom": "17.0.2"."sass": "^ 1.37.5"
  },
  "devDependencies": {
    "eslint": "7.32.0"."eslint-config-next": "11.0.1"}}Copy the code

To prepare

The next. Js project created using create-next-app to configure interface cross-domain proxy forwarding requires the Custom Server function. Install Express and HTTP-proxy-Middleware first

npm install express http-proxy-middleware --save
/ / or
yarn add express http-proxy-middleware --save
Copy the code

Creating a proxy configuration

Create the server.js file in the root directory

const express = require('express')
const next = require('next')
const {createProxyMiddleware } = require('http-proxy-middleware')

const devProxy = {
    '/api': {
        target: 'http://127.0.0.1:7001'.// The port itself is configured appropriately
        pathRewrite: {
            '^/api': '/'
        },
        changeOrigin: true}}const port = parseInt(process.env.PORT, 10) | |3000
constdev = process.env.NODE_ENV ! = ='production'
const app = next({
    dev
})
const handle = app.getRequestHandler()

app.prepare()
    .then(() = > {
        const server = express()
        if (dev && devProxy) {
            Object.keys(devProxy).forEach(function(context) {
                server.use(createProxyMiddleware(context, devProxy[context]))
            })
        }

        server.all(The '*'.(req, res) = > {
            handle(req, res)
        })

        server.listen(port, err= > {
            if (err) {
                throw err
            }
            console.log(`> Ready on http://localhost:${port}`)
        })
    })
    .catch(err= > {
        console.log('An error occurred, unable to start the server')
        console.log('An error occurred, unable to start the server')
        console.log(err)
    })
Copy the code

Http-proxy-middleware may be incorrect due to version issues

// 1.0.0 or above:
const {createProxyMiddleware } = require('http-proxy-middleware')
// 1.0.0
const createProxyMiddleware  = require('http-proxy-middleware')
Copy the code

After the configuration is complete, restart