CORS Error was happened in index.html

[aya-miyazaki]

Related comment:

• Panel 0.14.0 breaks Fast Templates #4080 (comment)
• Finish CDN migration #3870 (comment)

ALL software version info

• Python 3.8
• panel 0.14.1
• host OS: Ubuntu 18.04.3 LTS
• client OS: Windows 10 Pro 21H2
• client browser: Chrome(109.0.5414.74) and Edge(108.0.1462.46)

Description of expected behavior and the observed behavior

Our panel application is served on a host PC and users access the page from a client PC with a browser.

It appears that some users are experiencing CORS Errors in their connection to fast-components.js and index.js and cannot access the index page created based on panel/_templates/index.html.
This situation is almost identical to this comment.(#4080 (comment)).
The page show just white page when this error happen.

When this line as the below was reverted back to before the change, this error went away.

panel/_templates/index.html The line of 28 and 29
Before changed (This changed from #3980 ):

 <script type="module" src="https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js"></script>
  <script type="module" src="https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/fast-components.js"></script>

After changed (This code from #3870 ):

<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/index.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/fast-components.js"></script>

Since I do not know why the server was changed, I am unable to offer any suggested changes to the code.
This code fixing have to satisfy both issue #3870 and #3970.

Complete, minimal, self-contained example code that reproduces the issue

panel serve app1.py

Then, access the server with browser, this error may happen.
Some people experience this problem, others do not.
From our research, it does not appear that the cause of this occurrence is due to the IP address from which you are connecting, the VPN, or your browser.

Stack traceback and/or browser JavaScript console output

Same as #4080 (comment)

[philippjfr]

Thanks for reporting. We switched from jsdelivr (and unpkg) to our own CDN because we found the performance and latency of those free services to be highly unreliable. I've also double and triple checked all the CORS configuration on the S3 bucket and CloudFront setup and could not find any issues, so I'm very confused why this issue keeps reoccurring.

Could you do me a favor and open the browser console when visiting the web page you are attempting and then run:

await fetch('https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js')

and report back what the response looks like? Could you also try clearing your browser caches just in case.

[aya-miyazaki]

@philippjfr Thank you for your quick reply. I tried it on Edge and Chrome, but I get a CORS Error as well when I type the command.

When this command below, no error occurred.

await fetch('[https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js', {mode: 'no-cors'})](https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js%27))

Thank you.

[aya-miyazaki]

Hi, We tested connecting to the .js files by curl command on client pc.

curl -H "origin: http://10.65.69.67:8193/" -v "https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js"

**Result**

*   Trying 18.65.202.127:443...
* Connected to cdn.holoviz.org (18.65.202.127) port 443 (#0)
* schannel: disabled automatic use of client certificate
* ALPN: offers http/1.1
* ALPN: server accepted http/1.1
> GET /panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js HTTP/1.1
> Host: cdn.holoviz.org
> User-Agent: curl/7.83.1
> Accept: */*
> origin: http://10.65.69.67:8193/
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Content-Type: application/javascript
< Content-Length: 685
< Connection: keep-alive
< Date: Wed, 18 Jan 2023 01:15:48 GMT
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, HEAD
< Last-Modified: Mon, 10 Oct 2022 16:50:43 GMT
< ETag: "112af255c19e0e2b4e3ecf072d317072"
< Accept-Ranges: bytes
< Server: AmazonS3
< X-Cache: Hit from cloudfront
< Via: 1.1 fddd1f6dd585e1b212b338f01f697e32.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: NRT57-P3
< X-Amz-Cf-Id: hmKhGl-Ugl-jFDPoJFkFJC2LEkbML_7Bdv2UG6FuVbLw8ofFS4CTsw==
< Age: 4018
<
export * from "./color-blending.js";
export * from "./color-converters.js";
export * from "./color-hsl.js";
export * from "./color-hsv.js";
export * from "./color-interpolation.js";
export * from "./color-lab.js";
export * from "./color-lch.js";
export * from "./color-palette.js";
export * from "./color-quantization.js";
export * from "./color-rgba-64.js";
export * from "./color-scale.js";
export * from "./color-xyz.js";
export * from "./component-state-color-palette.js";
export * from "./histogram.js";
export * from "./math-utilities.js";
export * from "./palette-extractor.js";
export * from "./parse-color.js";
export * from "./pixel-blob.js";
export * from "./pixel-box.js";
* Connection #0 to host cdn.holoviz.org left intact

This command also works on client pc.

curl -v "https://cdn.holoviz.org/panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js"

**Result**

*   Trying 18.65.202.118:443...
* Connected to cdn.holoviz.org (18.65.202.118) port 443 (#0)
* schannel: disabled automatic use of client certificate
* ALPN: offers http/1.1
* ALPN: server accepted http/1.1
> GET /panel/latest/dist/bundled/js/@microsoft/[email protected]/dist/index.js HTTP/1.1
> Host: cdn.holoviz.org
> User-Agent: curl/7.83.1
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Content-Type: application/javascript
< Content-Length: 685
< Connection: keep-alive
< Date: Wed, 18 Jan 2023 01:15:48 GMT
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, HEAD
< Last-Modified: Mon, 10 Oct 2022 16:50:43 GMT
< ETag: "112af255c19e0e2b4e3ecf072d317072"
< Accept-Ranges: bytes
< Server: AmazonS3
< X-Cache: Hit from cloudfront
< Via: 1.1 4466a7212ca4b615c38395a64813737c.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: NRT57-P3
< X-Amz-Cf-Id: QY8oaB6H4MjIgtGCJiJWiG9RbHzPQ26RiVVQLYRltMWWMDnSULTBKA==
< Age: 4185
<
export * from "./color-blending.js";
export * from "./color-converters.js";
export * from "./color-hsl.js";
export * from "./color-hsv.js";
export * from "./color-interpolation.js";
export * from "./color-lab.js";
export * from "./color-lch.js";
export * from "./color-palette.js";
export * from "./color-quantization.js";
export * from "./color-rgba-64.js";
export * from "./color-scale.js";
export * from "./color-xyz.js";
export * from "./component-state-color-palette.js";
export * from "./histogram.js";
export * from "./math-utilities.js";
export * from "./palette-extractor.js";
export * from "./parse-color.js";
export * from "./pixel-blob.js";
export * from "./pixel-box.js";
* Connection #0 to host cdn.holoviz.org left intact

[philippjfr]

@aya-miyazaki I just found a subtle misconfiguration in our CloudFront setup (specifically this SO post describes the problem: https://serverfault.com/questions/619699/setting-access-control-allow-origin-on-cloudfront). I've invalidated the CDN caches which should allow this to work correctly now. Could you try again?

[aya-miyazaki]

@philippjfr Thank you for your reserch!
We (but, only two people) have tried again, now our index page is working well withought CORS Error.
If our users encounter same CORS error, we will report again to this issue. Thank you very much!

[philippjfr]

Yay 🥳 Really appreciate your detailed write ups and following up so responsively.