[ReactFamilyBucket]スキャフォールディング用のプロキシを構成する2つの方法-Reactクロスドメインの問題を解決する

1.Axiosを介してサーバーにリクエストを送信します

这里假设有后端接口，我就不放了

axios是通过promise实现对ajax技术的一种封装,实现网页的局部数据刷新

1. Axiosサードパーティライブラリをインストールします：npm install axios

2.コンポーネントフォルダーの下に新しいAxiosDemoフォルダーを作成します。このフォルダーには、index.jsxファイル（シミュレートされたAjaxリクエストを書き込むため）が含まれています。

/*AxiosDemo/index.jsx*/
import React, {
    
     Component } from 'react';
//引入axios库
import axios from 'axios';

export default class Axios extends Component {
    
    
    handleRequest = () => {
    
    
        axios.get('http://localhost:5000/students').then(res => {
    
    
            console.log('学生数据', res)
        }, err => {
    
    
            console.log('出错了', err)
        })
    }
    render() {
    
    
        return (<div>
            <button onClick={
    
    this.handleRequest}>点击请求接口</button>
        </div>);
    }
}

3.App.jsxにAxiosDemoコンポーネントを導入します

/*App.jsx*/
import React, {
    
     Component } from 'react';
import AxiosDemo from './components/AxiosDemo';

export default class APP extends Component {
    
    
  render() {
    
    
    return (
      <div id="root">
        <AxiosDemo />
      </div>
    );
  }
}

4.ターミナルを開き、npmstartと入力してプロジェクトを実行します

5.コンソールを開き、ボタンをクリックして、コンソールがエラーを報告していることを確認します。

错误的问题在于浏览器进行了跨域请求。

第二に、クロスドメインを解決する方法（プロキシを構成する）-方法（単一サーバー）

ステップ1：package.jsonファイルでプロキシプロパティを構成します：ターゲットサーバーアドレス

ステップ2：Axiosによって要求されたアドレスをlocalhost：3000に変更します（理由は、クライアントがプロキシを介して要求する必要があるが、プロキシのポート番号が3000であるため、クライアントはそのポートを持つプロキシに要求を行う必要があるためですは3000です）

ステップ3：ボタンをクリックしてインターフェースを要求し、ブラウザーコンソールの出力を表示します

请求成功！

注：この方法には制限があります。エージェントは最初にフロントエンドプロジェクトを探します。フロントエンドプロジェクトにこのファイルがある場合、エージェントはフロントエンドデータを取得し、サーバーに要求しません。フロントエンドにそのようなファイルがない場合-プロジェクトを終了すると、サーバーlocalhost：5000にリクエストが送信されます。ただし、クライアントが異なるサーバーからのデータを要求する必要がある場合、複数のサーバーのインターフェースを要求する方法はありません。

3.クロスドメインを解決する方法（プロキシを構成する）-方法2（複数のサーバー）

1. srcフォルダーに新しいsetupProxy.jsファイルを作成して、 1つ以上のプロキシを構成します

这里要注意，要引入createProxyMiddleware 而不是proxy，否则会有问题

/*setupProxy.js*/
//http-proxy-middleware不需要手动引入，在搭建脚手架的时候已经自动引入了
const {
    
     createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    
    
    app.use(
        createProxyMiddleware('/api1', {
    
    //遇见/api1前缀的请求，就会触发该代理
            target: 'http://localhost:5000',//请求发给谁
            changeOrigin: true,//控制服务器收到的请求头中Host的值
            pathRewrite: {
    
     '^/api1': '' }//重写请求路径
        }),
        createProxyMiddleware('/api2', {
    
    
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {
    
     '^/api2': '' }
        })
    )
}

changeOrigin:true 指的是当客户端给服务器发送请求的时候，服务端接收到的是与服务端相同的地址
changeOrigin:false 指的是当客户端给服务器发送请求的时候，服务端接收到的是与服务端不相同的地址，但是也不会报错

2.次に、応答のプロキシ識別子を要求されたインターフェイスアドレス（''/api1または/api2"）に追加します。

3.ボタンをクリックしてリクエストを行い、ブラウザコンソールの出力を表示します

请求成功！！！

上記は、スキャフォールディングのプロキシを構成する2つの方法です。Reactのクロスドメイン問題を解決する内容です。「 ReactFamilyBucket」列に注意してください。
私の通常のプロジェクトに共通する問題と筆記試験の知識を共有し、CSDNであなたと面接し、一緒に進歩します。さあ。