reactjs 单SPA本地主机CROS来源问题- React应用程序

3qpi33ja  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(99)

我刚开始使用react..我有一个react应用程序,我将其迁移到了Single-SPA。为了将我的应用程序与主应用程序(具有许多Vue单SPA应用程序的平台)集成,我将其重新构建为

MainApp-它包括与进程相关的所有页面-在本地主机下运行:3000
根-html-文件-它包括一个index.html和package.json文件index.html(在本地主机5000下运行-由SPA生成)

代码:根文件-〉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应用程序作为独立运行良好。只有当运行根html文件应用程序(npm运行服务),这将加载myapp应用程序到它导致CROS起源问题。请找到屏幕截图

如果我走错了方向,请给我指路。

ryevplcw

ryevplcw1#

您需要将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"
  }
}

相关问题