0

I'm able to make this request without any error using python:

async def send_request():     
    session = aiohttp.ClientSession()
    body = {
        'client_id': 'play-valorant-web-prod',
        'nonce': '1',
        'redirect_uri': 'https://playvalorant.com/opt_in',
        'response_type': 'token id_token',
    }
    response = await session.post('https://auth.riotgames.com/api/v1/authorization', json=body)
    print(response)

But then I try doing the same thing inside my website using Javascript and Axios:

async function send_request() {
    const data = {
        "client_id": "play-valorant-web-prod",
        "nonce": "1",
        "redirect_uri": "https://playvalorant.com/opt_in",
        "response_type": "token id_token"
    }

    const response = await axios.post('https://auth.riotgames.com/api/v1/authorization', data)
    console.log(response)
}

And I get the following error:

Access to XMLHttpRequest at 'https://auth.riotgames.com/api/v1/authorization' from origin 
'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't 
pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there a way of making this request from my website?

Many thanks!

Alvaro Bataller
  • 673
  • 5
  • 15
  • You are not making this request from your website; it sounds like you are making it from your browser, which might be in your bedroom, right?. You have to disable Same-Origin Policy in your browser. For example, see: [Disable same origin policy in Chrome](https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome) – Booboo Jan 08 '21 at 20:54
  • Is not really feasible to ask everyone that will use the website to disable that option for the website to work correctly. – Alvaro Bataller Jan 08 '21 at 20:58
  • 1
    I get that. You then need to use your own server from which you downloaded the JavaScript from to act as a proxy to that website. You have already demonstrated that you know how to to do this. – Booboo Jan 08 '21 at 21:01

1 Answers1

0

Modern browser has restrction to fetch resource when you use XMLHTTPReques or fetchAPI in you website. So if you own the hosts(in you case is "auth.riotgames.com"),you juse add CORS headers in HTTP response, there are serveral header you may notice:

  • Access-Control-Allow-Origin: the origin you want to allow, '*' repersent all origin allowed and notice protocorl should be present as for example "http://www.stackoverflow.com" and "https://www.stackoverflow.com" are two differenct origin.
  • Access-Control-Allow-Methods: the HTTP Method allowed for the request
  • Access-Control-Allow-Headers: the server determine weather it want to accept the request when the heders set in.
  • Access-Control-Allow-Credentials: the server wantt o accept the request with cookie in request not not.

some case is more complex than that like you use content-type applicaton/json, browser make preflight with OPTIONS request before send real request.you my accpet request in server.you may also handle that.

another approch's you just make a proxy which host as same domain with you webiste, same protocol, domain, port. proxy server handles all request from webiste and refirect to the real one.

Hope this useful to you.

ostcollect
  • 1