Access to XMLHttpRequest at 'https://sua-ap-web-1.agora.io/api/v1?action=stringuid' from origin 'http://localhost:3000' has been blocked by CORS polic

I am using create-react-app to build an application that utilizes the Agora API. While trying to do so I receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error in my browser's console. I understand this is caused by CORS and that the API doesn't have an Access-Control-Allow-Origin header.

I have tried to deal with it using: https://www.telerik.com/blogs/dealing-with-cors-in-create-react-app by adding

"proxy": "https://sua-ap-web-1.agora.io"

to packaage.json, however this does not work. I am considering setting up a Node.JS proxy server as described here, but do not know if it would work to resolve the problem and if I should spend time going down that rabbit hole or if there is a better alternative.

I did notice that @plutoless on agora's github mentions that API calls should be made from the server end and not client side like React or AngularJS.

So the question is, is there a way to make API calls using ReactJS without having to setup a proxy server?

Answers 1

  • Finally got this to work, thanks @AkshatGupta for helping me identify the problem. I switched the sdk I was using from

    "agora-rtc-sdk": "^3.4.0"
    

    to using

    "agora-rtc-sdk-ng": "^4.0.1"
    

    and it started working perfectly. I do not yet understand the underlying problem for this issue however this worked for me. Do note that I did not have to setup a proxy server or setup a proxy field in package.json as I mentioned in the question.


Related Articles