2022-02-28学習記録--React-クロスドメインの問題の解決：プロキシの構成

まず、プロキシを設定する方法1

たとえば、次のようにpackage.json追加します。次に、以下に示すように、ネットワーク要求を送信ます。"proxy":"服务器地址"

axios

次に、プロキシを構成する方法2

srcその中に新しいファイルを作成します： setupProxy.js、カスタムコンテンツは次のとおりです：

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

module.exports = function(app) {
    
    
    app.use(
    	// 代理1
        proxy('/api1',{
    
     // 遇见/api1前缀的请求，就会触发该代理配置
            target: 'http://localhost:5000', // 请求转发给谁
            changeOrigin: true, // 控制服务器收到的请求头中Host字段的值，默认值是false
            pathRewrite:{
    
    '^/api1':''} // 重写请求路径【必需】
        }),
        // 代理2
        proxy('/api2',{
    
    
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite:{
    
    '^/api2':''}
        }),
    )
}

ネットワーク要求をaxios送信ポート番号の後に追加します/配置代理的名字。例：/api1、次の図を参照してください。

3.react足場構成プロキシの概要

これらは、bilibili ShangシリコンバレーReact学習ビデオの研究ノートです〜