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
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.