配置代理服务器

Vue配置代理服务器

在vue.config.js文件夹中写入如下代码：

module.exports = {
    devServer: {
        proxy: {
            '/api': {  
                target: 'https://www.baidu.com/',  //后台接口地址
                ws: true,  //如果要代理 websockets，配置这个参数
                changeOrigin: true,  //是否跨域
                pathRewrite: {
                    '^/api': '' //重写路径
                }
            }
        }
    }
}

这样所有出现/api的地方都会变成网址

React配置代理服务器

在src文件夹下建立一个setupProxy.js文件，并写入以下代码：

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
      proxy(
          '/api', { // 当发起以 /api 为前缀的请求时，触发该代理
          target: 'http://localhost:5000', /* 要转发的地址 */
          changeOrigin: true, /* 控制服务器接收的 Host 字段的值 */
          pathRewrite: { '^/api': '' }
    })
  )
}

这样所有出现/api的地方都会变成网址