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

Question

我正在尝试使用 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"]}
                },
            })
        ]
    })
} 

应用程序2idex.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>
);

任何帮助表示赞赏。谢谢

Answer 1

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

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