5

我是反应新手..我有反应应用程序，我迁移到 Single-SPA。要将我的应用程序与主应用程序（具有许多 Vue 单水疗应用程序的平台）集成，我已将其重新构建为

MainApp - 它包括与进程相关的所有页面 - 在 localhost:3000 下运行

root-html-file - 它包括一个 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 回答