🏠 back to Observable

Can use axios to get external data?


#1

got network error always. anyone can help? thanks!


#2

Could you link to an example notebook that illustrates the issue?


#3

As I understand it, there’s less of a reason to use Axios now that the Fetch standard is supported by modern browsers. Perhaps you are running into CORS issues? Have you read the introduction to data notebook?


#4

I need data from remote js file, like this “http://lol.qq.com/biz/hero/champion.js”, I want to load it directly instead of saving it to local. Sorry, I am a new developer, maybe there is better way to implement.


#5

Sounds like you need a CORS proxy. You can’t fetch directly from an HTTP site (HTTPS is required) and the server must have CORS enabled. You can try the demo instance of CORS-Anywhere to start.


#6

For what it’s worth, I tried to use a few different CORS proxies to load your data, but without success:

I couldn’t get CORS-anywhere to work at all. The other two proxies send the JS file with the wrong MIME Content-type: cors.io sends it as text/html and codetabs sends it as text/plain.


#7

This might be a bit confusing at first because the file isn’t data - it’s JavaScript code. So solving CORS, using axios, and other steps aren’t directionally right. You can, however, achieve what you want to do:

require("https://lol.qq.com/biz/hero/champion.js").catch(() => window.LOLherojs)

This uses require(), our method for including code, but since champion.js doesn’t implement UMD or any sort of ‘module definition’ standard and instead just leaves a variable behind, we catch that variable (what I call the ‘global leaks pattern’ in the module debugger).

(The other minor quirk is that I changed the URL from http:// to https://. qq.com supports both, but http:// won’t work with Observable or any SSL website).


#8

Thanks for your time!


#9

Thanks!


#10

It works!!! Really appreciate!