React中配置服务器请求代理(学习笔记)

  1. 在src目录下创建setupProxy.js文件,该文件名是固定的,且这个文件是配置给webpack用的,需要用到commonJs语法。

  2. 编写setupProxy.js配置具体代理规则:

// 这个库是用脚手架创建项目时内置的
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        // 旧版本用法
        // proxy('/api1', {
        //     target: 'http://localhost:5000',
        //     changeOrigin: true,
        //     pathRewrite: {
        //         '^/api1': ''
        //     }
        // }),

        // 新版本用法(需要这样用,否则会出现无法访问网页的问题)
        proxy.createProxyMiddleware('/api1', {
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: {
                '^/api1': ''
            }
        }),
        proxy.createProxyMiddleware('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {
                '^/api2': ''
            }
        })
    )
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容