2

I just checked one of my sites which used to work fine and have noticed I'm now getting a CORS error on my React CDN. The site is https://timothytolley.com/ for reference of the errors. I have used the Scripts suggested on the React Docs.

As a bit of background, I'm using webpack for compiling and node and express for my server.

Error:

Access to script at 'https://unpkg.com/react@16.7.0/umd/react.production.min.js' (redirected from 'https://unpkg.com/react@16/umd/react.production.min.js') from origin 'https://timothytolley.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any suggestions would be awesome,

Cheers!

Tim Tolley
  • 193
  • 2
  • 13

3 Answers3

2

Ran into the same issue, I believe it's a problem with unpkg itself. When serving version 16.7 they are missing the access-control-allow-origin header. The older versions hosted on unpkg have this so this may be a derp with recently uploaded files.

In the meantime you can also try another cdn like cloudflare:

<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>
Nathan
  • 1,396
  • 3
  • 18
  • 32
1

I do not know what is reason of this problem, but I solved it when I changed <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> on

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

If some of the URLs show Access-Control-Allow-Origin header and the rest do not, then it appears a problem with the caching layer or their CDN provider who might have changed the way their proxy works with CORS.

To quickly fix the issue, you can try a different 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>

In any case, please make sure that you always use <script> tag with integrity hash for maximum security.

Hamid Sarfraz
  • 1,089
  • 1
  • 14
  • 34