我如何以CDN的形式导入React?

时间:2019-02-01 01:40:28

标签: reactjs cdn

我刚刚检查了我的一个以前运行正常的站点,发现我的React CDN出现了CORS错误。该站点是https://timothytolley.com/,以供参考。我已经使用了React Docs上建议的脚本。

作为背景知识,我正在使用webpack进行编译以及为服务器进行节点和表示。

错误:

从CORS策略阻止从原点“ https://unpkg.com/react@16.7.0/umd/react.production.min.js”访问“ https://unpkg.com/react@16/umd/react.production.min.js”(重定向自“ https://timothytolley.com”)的脚本:没有“ Access-Control-Allow-Origin”标头出现在请求的资源上。

任何建议都很棒,

干杯!

3 个答案:

答案 0 :(得分:1)

遇到同样的问题,我相信这是unpkg本身的问题。提供16.7版时,它们缺少access-control-allow-origin标头。 unpkg上托管的旧版本具有此功能,因此这可能是最近上传文件的derp。

同时,您还可以尝试使用另一个Clouddnre CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script>

答案 1 :(得分:0)

我不知道此问题的原因是什么,但是当我更换时我解决了 {p}上的<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16.3/umd/react-dom.production.min.js"></script>

答案 2 :(得分:0)

如果某些URL显示Access-Control-Allow-Origin标头,而其他URL没有显示,则表明缓存层或其CDN提供程序可能出现了问题,它们可能更改了其代理与CORS的工作方式。

要快速解决此问题,您可以尝试使用其他React CDN

<script src="https://pagecdn.io/lib/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://pagecdn.io/lib/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

无论如何,请确保始终将<script>标记与integrity哈希一起使用,以实现最大的安全性。