Cors error

MDN Learn
#1

I used moesif CORS extension to bypass CORS error while I was doing the testing, it did work for me.
But when I tried to use “cors-anywhere” proxy server to fix the CORS error. It didn’t work. (“https://cors-anywhere.herokuapp.com/”)

Here is my code in Codepen.
“https://codepen.io/lauraxiaoliu/pen/rNOQYQJ”
Not sure where went wrong. Seeking help. :slight_smile: Thank you.

#2

@Laura I think the problem here is that you can’t fetch files from your localhost from an online site. This just won’t work due to the security models in place on the web, and plus also think about it — the local host refers to a local server running on your computer, which has no context in terms of an address on the internet. How would the server even find it if it could?

Your code does actually work, by the way. You can prove it by changing

let url='https://cors-anywhere.herokuapp.com/http://localhost:8000/'+verse+'.txt';

To point to a file that does exist on the web. For example, try

let url='https://raw.githubusercontent.com/mdn/learning-area/master/README.md';

You don’t even need to CORS anywhere app in this case, as GitHub correctly sets the CORS headers anyway.

To get your app working, I’d recommend using an environment like glitch.com, where you can create code files, but you can also create directories and upload new files. In this case, you could upload your verse text files and have them available on the same server to use, circumventing the need for CORS at all.

Or you could upload your example onto a GitHub repo and use GitHub pages to serve it.

1 Like