create-react-app gh-pages 使用代理部署

Question

I have an API call like this:

 const response = await fetch('/api/some-url')

To make it work I added proxy field to package.json

...
"proxy": "https://some-domain.com"
...

I tried npm start and it worked well

After that I added deploy to gh-pages: added property "homepage" and installed "gh-pages" package (all from this https://create-react-app.dev/docs/deployment/ )

Next, I ran npm run deploy and went to github where my app was being hosted (my-user-name.github.io/project-name). And saw the result of api call - 404 error. Request url of api call was 'my-user-name.github.io/project-name/api/some-url'.

Here is a github repo in which I have a problem: https://github.com/kpodmasko/binance-test-solution

Questions: How to change request url from my-user-name.github.io/project-name/api/some-url to https://some-domain.com/api/some-url and save proxy logic?

Answer 1

I added env variable ( https://create-react-app.dev/docs/adding-custom-environment-variables/ ) to change my-user-name.github.io/project-name/api/some-url to https://some-domain.com/api/some-url .

After that I have a problem with CORS. The solution is to remove proxy property from package.json. And use fetch like this fetch('https://thingproxy.freeboard.io/fetch/https://some-domain.com/api/some-url') .

It works on localhost, but gh-pages - not. So I think that to make it work on gh-pages you should found working proxy. Also, someone gave me advice that I can buy Digital Ocean hosting server and make it work.