Gatsby Module Federation CORS 错误和急切消费问题

Posted 2023-02-16

【中文标题】Gatsby Module Federation CORS 错误和急切消费问题

【英文标题】：Gatsby Module Federation CORS error and eager consumption issue

【发布时间】：2021-10-06 12:00:08

【问题描述】：

我正在尝试通过模块联合使用来自 gatsby 的微前端应用程序。当我尝试调用在 localhost:3001 上运行的组件时，出现 CORS 错误。知道如何解决这个问题吗？

这是我的gatsby-node.js

const packageJsonDeps = require('./package.json').dependencies;
const  ModuleFederationPlugin  = require("webpack").container;

exports.onCreateWebpackConfig = (
                                     stage,
                                     rules,
                                     loaders,
                                     plugins,
                                     actions,
                                 ) => 
    actions.setWebpackConfig(
        plugins: [
            new ModuleFederationPlugin( 
                name: "app2",
                remotes: 
                    app1: "app1@http://localhost:3001/remoteEntry.js",
                ,
                shared: 
                    ...packageJsonDeps,
                    react:  singleton: true, eager: true, requiredVersion: packageJsonDeps.react ,
                    "react-dom":  singleton: true, eager: true, requiredVersion: packageJsonDeps["react-dom"] ,
                    "styled-components":  singleton: true, eager: true, requiredVersion: packageJsonDeps["styled-components"] ,
                    "gatsby":singleton: true, eager: true, requiredVersion: packageJsonDeps["gatsby"]
                ,
            )
        ]
    )
 

App2idex.js

import Header from "app1/Header";
const data = "App2 data";

export default () => (

    <div style=margin: '20px'>
        <React.Suspense fallback='Loading app2 data'>
            <Header data= data  />
        </React.Suspense>
    </div>
);

任何帮助表示赞赏。谢谢

【参考方案1】：

尝试添加您的webpack.config.js：

devServer: 
 ...
 headers: 
  "Access-Control-Allow-Origin": "*"