getting JSON codepen example to work with CORS issue

[edwardsmarkff]

hello all –

grid newbie here.  so far it looks mind-blowingly awesome!

i think the best way to get the https://www.htmlelements.com/demos/grid/datagrid-bind-to-json/ demo to work is to do the following:

1. on windows, do window-key “R”
2. enter the following command & open up a new window:    chrome.exe –user-data-dir=”C://Chrome dev session” –disable-web-security
3. click the “Edit the codepen” button at the bottom
4. QUICKLY grab the URL to the codepen (it will morph after  a moment or so)
5. paste URL into the newly opened window from prior step
6. change the dataSource value to the following:  dataSource: ‘//htmlelements.com/demos/scripts/beverages.json‘,

there is an easy way to bypass the CORS issue by right-clicking the little lock just left of the URL and change “site-settings” to “allow insecure content” but i could not get that working with codepen.

• This topic was modified 8 months, 2 weeks ago by edwardsmarkff.
• This topic was modified 8 months, 2 weeks ago by edwardsmarkff.
• This topic was modified 8 months, 2 weeks ago by edwardsmarkff.

[edwardsmarkff]

sorry should have said:

1. visit: https://www.htmlelements.com/demos/grid/datagrid-bind-to-json/
2. scroll to bottom of page and notice the “Edit the codepen” button at the bottom of the page
3. on windows, do window-key “R”
4. enter the following command & open up a new window:    chrome.exe –user-data-dir=”C://Chrome dev session” –disable-web-security
5. go back to first window, and click “Edit the codepen” at the bottom of the page
6. QUICKLY grab the URL to the codepen (it will morph into another URL after  a moment or so)  repeat if necessary
7. paste URL into the newly opened window from step 4
8. change the dataSource value to the following:  dataSource: ‘//htmlelements.com/demos/scripts/beverages.json‘,

otherwise you get the CORS error.

[edwardsmarkff]

this is starting to become a big problem with all the codepen examples:

Access to script at 'https://codepen.io/source/modules/smart.grid.js' (redirected from 'https://cdpn.io/source/modules/smart.grid.js') from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• This reply was modified 8 months, 2 weeks ago by edwardsmarkff.
• This reply was modified 8 months, 2 weeks ago by edwardsmarkff.

[Markov]

Hi,

It would not be possible to bypass CORS with codepen. All examples are also included in the download package.

Regards,
Markov

[edwardsmarkff]

Actually, my suggestion works fine.

sadly, there is not a chrome plugin to do this for us, or at least not one i could find that works.

i should think simulating this with a plugin would be easy:    chrome.exe –user-data-dir=”C://Chrome dev session” –disable-web-security

[Author]

Posts