[JavaScript知识库]react和vue配置本地代理

在react中配置开发环境下的本地代理相对比较简单，直接在package.json文件中修改即可。
此处以本地服务器， 端口为5000为例

"proxy": "http://localhost:5000"

在项目目录的src /下新建setupProxy.js文件，然后写入如下代码：

let proxy = require('http-proxy-middleware')
module.exports = (app) => {
  app.use(
    proxy('/api', {
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }),
    proxy('/abc', {
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {
        '^/abc': ''
      }
    })
  )
}

Vue
　　vue配置本地代理，在项目根目录创建vue.config.js

module.exports = {
  pages: {
    index: {
       // page 的入口
       entry: './src/qq.js'
    }
  },
  // https://m.maoyan.com/ajax/movieOnInfoList
  lintOnSave: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'https://m.maoyan.com',
        changeOrigin: true,
        // 重写path路径
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
}