React axios における 1 つ以上のドメイン名へのクロスドメイン アクセスの問題について議論します。

[関連記事の推奨事項: ajax ビデオ チュートリアル ]

1.react axios ドメインへのクロスドメイン アクセスname

構成は非常に簡単です。現在の package.json ファイルで構成するだけです:

"proxy":"http:/ /iot-demo-web-dev.autel.com", //もちろん、ここには次のような偽のアドレス

があります:

# #クロスドメインが完成しました。もちろん、インターネット上にあるように、次のようにコードをいくつか追加することもできます:

I don't know whatこのコードを書くと、エラーが発生します。とにかく、エラーを報告します。プロジェクトはすでに実行されているため、ここでは具体的なエラー メッセージを表示できません

npm run eject このコマンド

エラーメッセージはおそらくプロキシが文字列の取得を望んでいることを意味しますが、今私が取得するのはオブジェクトなので、クロスドメインの場合は最初の画像の方法しか使用できません

次に axios をインストールします。もちろん、他のことも可能です。src ディレクトリ プロジェクトに API ファイルを作成し、その API ファイルに user.js を作成して次のコードを記述します。

import axios from 'axios'

export function _user(data) {
 return axios.get('device/detail', data)
}

ここで使用するクロスドメインは、最初の図に示されているようなクロスドメインの一種です。

リクエストを送信する必要がある場合は、次のコードをその場所に記述します。

import { _user } from '../api/user'

 componentDidMount() {
 let res = _user({})
 console.log(res)
 }

これで、背景

上記の種類のクロスドメインは非常に便利だと言えますが、バックエンドが 2 つまたは 3 つの異なるドメイン名を提供した場合はどうなるでしょうか?その場合はプラグインを使用する必要があります

#2.ドメイン間で複数のドメイン名にアクセスするための axios の反応プラグインをインストールします:

npm install --save http-proxy-middleware

インストール後、構成を開始します:

1. まず、一時的にコマンドを実行して構成を公開します

npm run eject
or
yarn eject

ここでエラーが発生する可能性があります:

#現時点では、Baidu でエラーを報告するか、私をフォローして続行してください。

エラーの理由は、足場を使用して構築するときに発生するためです。反応すると、システムは .gitignore ファイルを自動的に追加します。ウェアハウスに送信していない場合は、最初に送信する必要があります。ウェアハウス

これらを完了した後、 2 つのステップで、引き続き npm run eject

という名前を付けることができます。構成ファイルが公開されたら、

package.json 多くの構成がある可能性がありますが、それについては心配しないでください。 .js を src の下に配置し、その中に次のコードを記述します。

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
 app.use(
 createProxyMiddleware('/api', {
  target: 'http://iot-demo-web-server-dev.autel.com',
  changeOrigin: true,
 })
 )
 app.use(
 '/sys',
  createProxyMiddleware({
  target: 'http://localhost:5001',
  changeOrigin: true,
 })
 );
}

スクリプト パスを見つけて strat.js

117 行目あたりで次のコードをネゴシエートします。 :

require('../src/setupProxy')(devServer) //注意路径是否正，是你刚才建的那个文件

非常に多くのクロスドメインが成功します。このように特定のパスの前に api または sys を追加する必要があることに注意してください

関連する学習に関する推奨事項:

js ビデオ チュートリアル

以上がReact axios における 1 つ以上のドメイン名へのクロスドメイン アクセスの問題について議論します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。