单SPA本地主机CROS来源问题-反应应用

Question

我是新来的.我有react应用程序，我迁移到了单SPA。为了将我的应用程序与主应用程序(有许多Vue单spa应用程序的平台)进行集成，我重新构造为

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

root-html-file -它包括一个index.html和package.json文件index.html (在localhost:5000下运行)

代码: 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();

我的应用程序作为独立的工作很好。只有当运行root-html-file应用程序(npm运行服务)时，才会将myapp应用程序加载到其中，使CROS源起issue.Please，才能找到屏幕截图在这里输入图像描述。

如果我走错了方向，请引导我。

Answer 1

您需要将访问控制允许原产地标头添加到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"
  }
}