How can I get around CORS restrictions with my api calls?

Question

I've been developing a personal fortnite stats web app. I you use two main API calls. One of them has CORS access policy enabled, so in develoment I can get around this by adding the domain as a proxy and adding the path within the fetch request.

When I build this I cannot call the API, so have tried sending the full URL in the fetch request plus adding headers, mode etc to try and meet the CORS policy. I have tried everything but its still not working.

Could anybody help please?

Thanks

app.js level


fetchFortniteData = username => {
    return new Promise((resolve, reject) => {
      fetch(`/v1/profile/pc/${username}`, {
        headers: new Headers({
          'TRN-Api-Key': process.env.REACT_APP_TRN
        })
      })

package.json

 "proxy": "https://api.fortnitetracker.com",

The errors I receive from the console are:

Access to fetch at 'https://api.fortnitetracker.com//v1/profile/pc/popps01' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

2fortniteApi.js:57 OPTIONS https://api.fortnitetracker.com//v1/profile/pc/popps01 404

Which is what was happening in development, which is why I added a proxy.

I have also added mode: 'no-cors' and other allow origin keys to the header but it still doesnt work.

In the network tab:

Request URL: https://api.fortnitetracker.com//v1/profile/pc/popps01 Request Method: OPTIONS Status Code: 404 Remote Address: [2606:4700:20::6819:9810]:443 Referrer Policy: no-referrer-when-downgrade Provisional headers are shown Access-Control-Request-Headers: trn-api-key Access-Control-Request-Method: GET Origin: http://localhost:3000 Referer: http://localhost:3000/ User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

`fetch` already returns promise, why you are wrapping it in another one ? — Belmin Bedak, Jun 05 '19 at 10:53
You need to use https://stackoverflow.com/posts/56458898/edit to edit/update the question and add information about what exactly you mean by “still not working”. What’s the exact error message the browser is logging in the devtools console? What’s the HTTP status code of the response? Use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than 200 OK success response? — sideshowbarker, Jun 05 '19 at 11:16
It’s being called from a child component down the tree. The fetch is working, albeit I cannot see the header values in the network tab... also when that is successful it calls another Fetch with the accountId from the first result — JasonC, Jun 05 '19 at 12:02
The server you are calling must add the appropriate headers. If the server is not adding them, they don't want you to access their server. It would probably be a good idea to respect that wish. Just search for "No 'Access-Control-Allow-Origin' header is present on the requested resource" on this site and you'll find thousands of other questions about this... — Heretic Monkey, Jun 05 '19 at 12:42
Thanks Heretic, what if I setup an express backend and sent the requests that way. Will i be able to send headers... — JasonC, Jun 05 '19 at 12:53
@Jason if you set up an express backend and make the call from there, then you might be able to successfully make the call. It's worth a try at least. In any case, if the server you're calling doesn't allow CORS then there's nothing you can do on your end if you want to call it from the browser directly. — James Whiteley, Jun 06 '19 at 12:35
Just remember to make your express backend accept CORS requests (`const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors())`, or something like that). — James Whiteley, Jun 06 '19 at 12:37

score 1 · Answer 1 · answered Jun 17 '19 at 14:02

For anybody that has this problem in the future, if you create an Express app backend and add no cors that will bypass the API cors policy. In development, all you need to do is add a proxy, however, when going into production that will not work so set up an Express backend, point your front-end endpoints to the backend REST requests.

I also hosted the backend on Elastic Beanstalk, the front end of s3 and CloudFront and it works.

Pranav Totala · Answer 2 · 2019-06-06T10:21:00.267

-1

Two methods:

Install a chrome extension to Access-control-allow-origin to allow cross-origin redirects. extention will allow if your backend server is on your local machine
If the backend server is yours(your localhost), put access control allow origin to '*'.

This is the default django server settings (settings file) to allow cors:

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_METHODS = (
        'GET',
        'POST',
        'PUT',
        'OPTIONS',
    )

CORS_ORIGIN_WHITELIST = ('*', )

Do keep this in mind before making your server.

edited Jun 06 '19 at 10:21

answered Jun 05 '19 at 13:24

Pranav Totala

148
2
14

Thanks but its for production and on aws, my local extensions wont bypass users to the site. I will make a backend locally and try that way – JasonC Jun 05 '19 at 17:00
edited ans, if you are using Django in backend. – Pranav Totala Jun 06 '19 at 10:22

How can I get around CORS restrictions with my api calls?

2 Answers2