I have uploaded a Reactjs build to a subdomain (a web hosting service), but most of the Axios.get API requests are causing CORS errors. It does not seem to be the usual problem of allow-origin because that tests to be working.
I created .htaccess and put it in the subdomain root folder with the following code
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
which I confirmed working with the online test tool that gave this result:
"HTTP/1.0 200 OK =>
Connection => close
content-type => text/html
last-modified => Mon, 08 Aug 2022 03:52:36 GMT
accept-ranges => bytes
content-length => 644
date => Mon, 08 Aug 2022 02:39:20 GMT
server => LiteSpeed
access-control-allow-origin => *
alt-svc => h3=":443"; ma=2592000, h3-29=":443"; ma=2592000, h3-Q050=":443"; ma=2592000, h3-Q046=":443"; ma=2592000, h3-Q043=":443"; ma=2592000, quic=":443"; ma=2592000; v="43,46""
when I test my URL with test-cors.org it also shows to be working:
Sending GET request to https://subdomain.mysite.com
Fired XHR event: loadstart
Fired XHR event: readystatechange
Fired XHR event: readystatechange
Fired XHR event: progress
Fired XHR event: readystatechange
Fired XHR event: load
XHR status: 200
XHR status text: OK
XHR exposed response headers:
content-length: 287
content-type: text/html
last-modified: Mon, 08 Aug 2022 03:52:36 GMT
Fired XHR event: loadend
but my site produces this error in the browser inspector:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://query2.finance.yahoo.com/v8/finance/chart/MYM=F?region=US&lang=en-US&includePrePost=&interval=15m&range=2d. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
I can only think that the server cache needs clearing, as I found a lot of people with problems similar suddenly find it working after a few days, but I need to know if it is something I am doing wrong rather than wait days for a cache refresh.
Thanks to @jaromanda-x in the comments I resolved this by approaching it differently.
I cloned a CORS ANYWHERE proxy server on Heroku and added the subsequent URL created onto the front of my axios.get requests for my React build. After it tested working, I whitelisted it with only my domain address so that the public facing CORS proxy server would not be abused.
The steps were as follows:
create a free account with Heroku and download their CLI and login from there. I then cloned CORS ANYWHERE to my local machine from that CLI
git clone https://github.com/Rob--W/cors-anywhere
cd cors-anywhere
then created an app on heroku with
heroku create
it makes it with a random name you can then change via the platform or in the CLI. Once that was done I deployed it from the CLI with
git push heroku master
This created a public address I was able to put on the front of my axios.get URL requests in React so they now looked like this
axios.get('https://mycorsproxyapp.herokuapp.com/https://query2.finance.yahoo.com/v8/finance/chart/MYM=F?region=US&lang=en-US&includePrePost=&interval=15m&range=2d')
That tested working fine on my live React build site, so the final part was to lock it down to only my site, and to limit the risk of my own site abusing it accidentally, I limited the rate to 60 per minute. This was done from the local Heroku CLI or in the platform settings.
heroku config:set -a mycorsproxyapp CORSANYWHERE_WHITELIST=https://myreactsite.com
heroku config:set -a mycorsproxyapp CORSANYWHERE_RATELIMIT="60 1"