Question

我正在使用JavaScript渲染React组件。

JavaScript代码段

function loadRemoteComponent(url) {
    return fetch(url)
        .then(res => res.text())
        .then(source => {
            var exports = {}
            function require(name) {               
                if (name == 'react') return React
                else throw `You can't use modules other than "react" in remote component.`
            }
            const transformedSource = Babel.transform(source, {
                presets: ['react', 'es2015', 'stage-2']
            }).code
            eval(transformedSource)
            return exports.__esModule ? exports.default : exports
        })
}

使用URL，我正在渲染React组件。在当前解决方案/网站中，React组件使用Javascript呈现。

当我尝试在其他网站上呈现Javascript时，它显示了CORS错误。

我尝试过“ Access-Control-Allow-Origin”；但这不起作用，

它向我显示控制台错误 “从源'http://xxx/Scripts/components/xxx.jsx到'http://yyy'处的提取访问已被CORS策略阻止：请求的资源上没有'Access-Control-Allow-Origin'标头。如果响应不透明满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。”

有人对此有解决方案吗？

Answer 1

您是否尝试过在服务器端将cors标头设置为通配符？

// nodejs/express
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

用Javascript渲染React JS组件

1 个答案: