CORS issues when using a fetch request to call Amazon Web Services CloudSearch

Question

I am currently working on a search input that will query an AWS database of users. The client has provided me with a cloudsearch endpoint and all works perfectly in postman, returning the correct user with a 200.

However within my create-react-app, using hooks, my fetch request returns the following....

from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

My fetch request below...

const getUsers = async (query) => {
const results = await fetch(`https://search-****-*****.eu-west1.cloudsearch.amazonaws.com/2013-01-01/search?q=${query}`, {

            headers: {
                'Content-Type': 'application/json', 
                'Access-Control-Allow-Origin': '*'
          }
        })
        const userData = await results.json()
        return userData.results
    }

I have a CORS chrome plugin that is turned on but doesn't appear to be making any difference. I want to make sure I can allow the request whilst ensuring the security of my API call.

Any advice would be greatly appreciated.

Thanks!

EDIT

Added in an express server on port 3005 and then replace this in my fetch request...

app.get('/search', function(req, res, query){ 
    request(`https://search-***-***.eu-west-1.cloudsearch.amazonaws.com/2013-01-01/search?q=`, function (error, response, body) { 
      if (!error && response.statusCode === 200) { 
        console.log(body); 
        res.send(body); 
      } 
     }); 
  });

then updated my fetch request like this...

const getUsers = async (query) => {
        const results = await fetch(`http://localhost:3005/search` + `${query}`)      
        const userData = await results.json()
        console.log(results);

        return userData.results
    }

However, whilst this approach works if the query is hard coded into the express file, it returns an empty response if the query is passed on the fetch side. Is there any further configuration that needs to happen?

This is the output of the results in the console

type: "cors"
url: "http://localhost:3005/search?un"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: true
__proto__: Response

Zain Ul Abideen · Accepted Answer · 2020-03-18T08:23:12.093

0

Reason:

This is the restriction from the API you are calling because of security purpose it's not allowed front-end code to hit the API.

It's not feasible to put an API-key on client code because it could be easily accessible via browser.

Solution:

You can create an express server which will act as proxy server for you, from your front-end code you will hit that proxy server and that proxy server will hit the desired API and get the response for you.

This article is helpful.

edited Mar 18 '20 at 08:23

answered Mar 13 '20 at 12:34

Zain Ul Abideen

1,617
1
11
25

Hey @zain thanks for your help, this is now giving me access to the correct response. However I'm unsure as to how to integrate this into my react hooks solution. Would I need to now change my fetch request? – LAT89 Mar 13 '20 at 14:57
Hello @LauraAnnabel89, you just need to point your `fetch` in react code towards your express server. for example your express server listening on port 4000 so your fetch would be something like this: `fetch("http://localhost:4000/" , options)` – Zain Ul Abideen Mar 13 '20 at 15:23
Thanks Zain - I've updated my question as I think I'm nearly there! But having issues passing in the query parameter. If you have any further advice, I'd be very grateful! – LAT89 Mar 13 '20 at 17:30
Are you able to get the result in this statement? `console.log(results);` – Zain Ul Abideen Mar 13 '20 at 18:55
https://stackoverflow.com/questions/37230555/get-with-query-string-with-fetch-in-react-native Hope this link would be helpful. – Zain Ul Abideen Mar 13 '20 at 19:08

CORS issues when using a fetch request to call Amazon Web Services CloudSearch

1 Answers1

Linked