5

私は反応するのが初めてです..Single-SPAに移行した反応アプリケーションがあります。私のアプリケーションをマスターアプリケーション（多くのVueシングルスパアプリケーションを持つプラットフォーム）と統合するために、私は次のように再構築しました

MainApp - プロセスに関連するすべてのページが含まれます - localhost:3000 で実行されます

root-html-file - 1 つの index.html および package.json ファイル index.html が含まれます (localhost:5000 で実行 - SPA によって生成)

コード: root-html-file -> index.html

<script type="systemjs-importmap">
      {
        "imports": {
    "myapp": "http://localhost:3000/",
    "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
    "react": "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"
     }}</script>

Promise.all([System.import('single-spa'),System.import('react')]).then(function (modules) {
          var singleSpa = modules[0];
            singleSpa.registerApplication(
                'myapp',
                () => System.import('myapp'),
                location => true
            );
          singleSpa.start();

myapp アプリケーションはスタンドアロンとして正常に動作します。myapp アプリケーションをロードする root-html-file アプリケーション (npm run serve) を実行している場合にのみ、CROS オリジンの問題が発生します。スクリーンショットを見つけて、 ここに画像の説明を入力してください

方向が間違っている場合はご案内ください。

4

1 に答える 1

1

Access Control Allow Origin ヘッダーを React アプリに追加する必要があります。webpack では、以下を webpack.config.js ファイルに追加することで実行できます。

devServer: {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}
于 2020-06-28T00:16:31.820 に答える