我是 React 新手。我有 React 应用程序,已迁移到 Single-SPA。 为了将我的应用程序与主应用程序(具有许多 Vue single-spa 应用程序的平台)集成,我已将其重新构造为
MainApp - 它包括与进程相关的所有页面 - 在 localhost:3000 下运行
root-html-file - 它包括一个index.html和package.json文件 index.html(在 localhost:5000 下运行-由 SPA 生成)
代码: 根html文件->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 应用程序独立工作正常。 仅当运行 root-html-file 应用程序(npm runserve)时,该应用程序会将 myapp 应用程序加载到其中,从而导致 CROS 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"
}
}
如果其他答案不起作用,你可以尝试这个。
这个概念是,假设你有
根项目 -> 在 localhost:5000 运行
子项目 -> 您已经构建了它,然后托管了构建的文件 -> 正在 localhost:3000 运行
如果您尝试从任何其他端点(3000)访问端点(5000)的资源,您将在根项目中获得 CORS。
您可以尝试在命令提示符下使用以下带有
build
标志的命令来托管子应用程序 --cors
文件夹。
npx http-party/http-server --port=3000 --cors
.
此处
--cors
标志将使其适合由 localhost:5000(即您的根项目)使用。
希望这有帮助。