反応プロジェクトの開発中のクロスドメイン問題の解決策

1つ、1つを計画する

create-react-appスキャフォールディング作成react時間プロジェクトの使用では、開発中のインターフェイスアクセス時に、クロスドメインの問題が発生します。
解決策はpackage.json、次のように次の構成ファイルを追加することです。
```
"proxy": "http://localhost:5000"  // 配置你要请求的服务器地址
```
これは、低バージョンcreate-react-appが構成2.0をpackage.json増やすことができる時間よりも古い場合の唯一の方法であり、タイプにすることができます。proxyproxyobject

2つ、2つを計画する

create-react-appスキャフォールディング作成react時間プロジェクトの使用では、開発中のインターフェイスアクセス時に、クロスドメインの問題が発生します。
回避策はpackage.json、次の構成ファイルを追加して、複数のエージェントを構成することです。targetターゲットサーバーですか;changeOriginデフォルトfalseでは、目標の元のホストヘッダーを変更する必要がありますURL;secureつまりhttps、インターフェイスでパラメーターを構成する必要がある場合true;pathRewriteソースなどの書き換え要求にアクセスapiすると、要求は/次のように解析されます：

  "proxy": {
    
    
    "/data": {
    
    
      "target": "http://localhost",
      "changeOrigin": true,
      "pathRewrite": {
    
    "^/api" : "/"}
    },
    "/rest": {
    
    
      "target": "http://localhost/rest",
      "changeOrigin": true,
      "pathRewrite": {
    
    "^/api" : "/"}
    }
  }

実行後、エラーが発生し、サポートstringタイプのみがサポートされていないことを示し、object低バージョンのみをサポートすることに同意しました。
この点での解決策は、サービスをダウングレード、削除node_module/react-scripts、実行しnpm i [email protected] --save、最後に再起動して、フロントエンドによるクロスドメインの問題を解決することです。

三、計画三

ダウンロードするにはhttp-proxy-middleware、を使用http-proxy-middlewareして、npm i http-proxy-middleware --saveダウンロードするコマンドを使用して、クロスドメインの問題を解決しますhttp-proxy-middleware。

作成されsrc/setupProxy.jsたコードは次のとおりです。

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
      
      
	// proxy第一个参数为要代理的路由
    app.use(proxy("/data", {
      
      
        target: "http://localhost", //配置你要请求的服务器地址，代理后的请求网址
        pathRewrite: {
      
      '^/data': ''}, //路径重写
        changeOrigin: true, // 是否改变请求头
    }))
    app.use(proxy("/rest", {
      
      
        target: "http://localhost/rest",
        pathRewrite: {
      
      '^/data': ''},
        changeOrigin: true,
    }))
};

npm run ejectいずれかのyarn ejectコマンド、そのことをreactプロジェクト内のコンフィギュレーションファイルが公開しました。
公開された構成ファイルで、start.js次のように構成します。
```
  require('../src/setupProxy')(devServer);
```

行わ項目構成、それら自身のファイル構成に露出していない次のようにファイル、コードは次のとおりです。webpack.dev.conf.jsdevServerwebpackcreate-react-appeject

  devServer: {
      
       // 配置webpack-dev-server， 在本地启动一个服务器运行
    host: 'localhost', // 服务器的ip地址 希望服务器外可以访问就设置 0.0.0.0
    port: 8088, // 端口
    open: true, // 自动打开页面
    historyApiFallback: true,
    proxy: {
      
      
      "/v1": {
      
      
        "target": "https://www.google.com/",
        "changeOrigin": true
        }
    }
  },

反応プロジェクトの開発中のクロスドメイン問題の解決策

1つ、1つを計画する

2つ、2つを計画する

三、計画三

おすすめ