React はクロスドメインの問題や起こり得る問題、トラブルシューティングを解決するためにリバース プロキシを構成します

反応してリバースプロキシを設定する

最近Webサイトのインターフェースを取得したところ、クロスドメインであることが分かりましたが、バックエンドのインターフェースを手書きするのは嫌だったので、フロントエンドのリバースプロキシを考えました。簡単に言えば、ローカル プロジェクトがローカル サーバーに転送されることを意味します。サーバーがインターフェイスを取得したときに、他の人のサーバー インターフェイスを呼び出す必要がある場合、明らかにローカル コンピューターには該当するインターフェイスがないため、クロスドメインの状況では、リバース プロキシを構成して、関連するインターフェイスに遭遇したかどうかをコンピューターに伝える必要があります。このインターフェイスを他のサーバーから取得する必要があります。つまり、ローカル サーバーは、まず外部サーバーからデータを取得し、それ自体を介してそれを返します. その後、この部分はローカルサーバー上でブロックされます, つまり、見ることができません. はい、これが React でリバースプロキシを設定する方法です: まず、パッケージを使用する必要があります
:

 http-proxy-middleware
 //使用以下命令安装
 npm i http-proxy-middleware

次に、プロジェクト ファイルの src フォルダーに新しいsetupProxy.jsページを作成します。この時点では、ページは空白です。次のコードを記述します。

const {
    
    createProxyMiddleware} =require('http-proxy-middleware')  //导入需要的包，解构出需要的模块

module.exports=function(app)
{
    
    
    app.use(
        '/ajax',   //这里的路径是表示需要代理请求的路径开头，所有以这个路径开头的请求地址均需要进行反向代理
        createProxyMiddleware({
    
    
        target:'https://m.maoyan.com', //反向代理的外地服务器ip地址，使用域名也可以
        changeOrigin:true,  //需要跨域，为true
   		//pathRewrite:{} 是否需要路径重写，如果你是以自己重新命名的路径开头，那么你需要重写那个开头，以保证向外地服务器发送正确的请求url地址
    }))
}

要約すると、リバース プロキシの準備が整ったので、簡単なインターフェイスを作成して試してみましょう。

import axios from 'axios'
import React, {
    
     Component } from 'react'

export default class App extends Component {
    
    
  display()
  {
    
    
    alert('nihao')
  }
  componentDidMount = () => {
    
    
    axios.get('/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10')
            .then(res=>{
    
    
              console.log(res.data.coming);
            })
  }
  
  render() {
    
    
    return (
      <div>
          <button onClick={
    
    ()=>{
    
    
            axios.get('/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10')
            .then(res=>{
    
    
              console.log(res.data);
            })
          }}>获取</button>
      </div>
    )
  }
}

ロード後、ボタンをクリックして情報を取得します:

ブラウザでのリクエストの送信に関連する情報を表示します:

ここで、宛先アドレスは別の Web サイトですが、ここに表示されている URL アドレスは localhost:3000 であることがわかります。リバースプロキシでも問題ありません。
その後、重要な問題を発見しました。
src に appxjd などの新しいサービス ディレクトリを作成し、その中に新しいプロジェクトを書き続けた場合、ルートを追加し、その中のサブコンポーネントのフック関数componentDidMount に、クロスを送信する ドメインリクエストを行うと、常に 404 not found が表示されます。

import axios from 'axios'
import React, {
    
     Component } from 'react'

export default class app extends Component {
    
    
  state={
    
    
    list:[]
  }
  componentDidMount = () => {
    
    
    axios.get({
    
    
      url:'/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10'
    }).then(res=>{
    
    
      console.log(res.data);
    })
  }
  
  render() {
    
    
    return (
      <div>
        即将上映的电影
        <button onClick={
    
    ()=>{
    
    
            axios.get('/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10')
            .then(res=>{
    
    
              console.log(res.data);
            })
          }}>获取</button>
      </div>
    )
  }
}

しかし、コンポーネントのボタンボタンでリクエストしたのは確かに問題がないため、

フック関数でリクエストを行うことはできず、関数を書くことしかできません。dom構造体をロードした後、対応する関数を実行します。この問題を置き換えるために。
今後、このフック関数がクロスドメインリクエストを送信する問題を解決する方法を検討しますが、外部フック関数はまだ通常に使用されていることに注意してください。ルートに関係するかどうかはわかりませんが、可能性は低いです。結果が判明したらブログを書きます。この質問に答えてください。
さて、今日の記事はここまでです。