blocked by CORS policy at Chrome

Community Help
1

Hi, my webpage is suddenly stop loading contents with Chrome94 with this console message:
Access to fetch at ‘https://cdn.jsdelivr.net/npm/d3@5/package.json’ from origin ‘http://mywebserver.com’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private.

How can I resolve this? Thank you in advance.

2

Oh no! Is your server is using http rather than https? Or are you experiencing a fetch error somewhere else?

3

Hm, that doesn’t make sense to me. From Private Network Access update: Introducing a deprecation trial:

Starting in Chrome 94, public non-secure contexts (broadly, websites that are not delivered over HTTPS or from a private IP address) are forbidden from making requests to the private network.

But unless you’re somehow using a local proxy for jsdelivr.net, I don’t understand how that change could affect you. Can you share more details about your setup?

4

aaronkyle & mootari, thank you both. Yes my server is using http (not https) under corporate VPN. So is there any way to fix this issue? (unless downgrading Chrome version?) I am not an expert enough to explain my setup, but just work on Observablehq notebook and download all codes at my local laptop and change .js file import/data path and upload to linux server which worked before Chrome update. Thanks again.

5

If you’re having troubles to fetch a JS library, you can always download it and upload it as a file attachment. In your original question, it looked like you were having trouble to import d3@5. You may attach and import it as demonstrated here:

Does this help?

6

Thanks a lot, I guess this is the right way to do it, and how you knew that I was using v5 :slight_smile: ? I am afraid I’ve tried your suggestion, but slider was not moving. (I’ve also attached d3-simple-slider.min.js version 1.10.0 like yours too, but it is not completely active.) My previous d3 calling was like this, any suggestion?:
d3 = require.alias({
“d3-array”: “d3@5”,
“d3-axis”: “d3@5”,
“d3-dispatch”: “d3@5”,
“d3-drag”: “d3@5”,
“d3-ease”: “d3@5”,
“d3-scale”: “d3@5”,
“d3-selection”: “d3@5”,
“d3-transition”: “d3@5”,
“d3-color”: “d3@6”,
“d3-interpolate”: “d3@6”//, “d3-format”: “d3-format@1”
})(“d3@5”, “d3-simple-slider@1.10.0”)

7

Hi @perrec - Is there a notebook that you can share? It’s difficult for me to conceptualize what’s going on.

Your require function looks like it’s written in standard JavaScript, so I assume you’re working separately from Observable. Can you share something in GitHub or otherwise copy in more code?

I am not familiar with regular JavaScript: all I know is Observable :stuck_out_tongue: In Observable, you can get a slider from ‘Inputs’ library, which is part of the standard library.

I also attached the d3-simple-slider version 1.10.0 into this notebook; what isn’t active?

Sorry I can’t be more help just yet!

1 Like
8

Thanks a lot, actually it worked after company VPN update (which is strange/stupid). But your help was really great, I appreciate! Take care.

9

if you don’t mind developing in firefox, the CORS policy can be be toggled on/off there without use of a plugin/extension. You can see it under about:config options from the browser URL.