I
I
iQuasar2019-07-26 01:01:21
JavaScript
iQuasar, 2019-07-26 01:01:21

How to avoid CORS error with fetch credentials?

Good day :)
The essence of my problem is as follows:
I'm trying to fetch json from an external resource using fetch. fetch without parameters returns json without the required data array (it turns out to be hidden). I set the credentials: 'include' property, which naturally results in a CORS error (The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include ').
Accordingly, you need to add the Access-Control-Allow-Credentials property to the response header. This can only be done in the backend, as far as I understand, I add an express backend to create-react-app. added there

var cors = require('cors');
app.use(cors());

But still nothing works. That I just didn't try. I set up a proxy in node, did a fetch in the backend part, it doesn't work.
const url = 'https://www.instagram.com/graphql/query/?query_id=17851374694183129&variables={"id":"500818047","first":10}';
const api_url = await fetch(url, {
   credentials: 'include'
});
const data = await api_url.json();
console.log(data);

Tell me the solution, maybe everything can be done easier or am I doing something wrong
ps in jsone the edges array is hidden

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton Shamanov, 2019-07-26
@SilenceOfWinter

if we are talking about instagram, then there seemed to be an option to return jsonp with which there should not be any problems.

K
Kerridan, 2021-11-30
@Kerridan

We need to set the correct headers in the server response in order for cross-domain requests to work and we have access to the content that the server sends. Here is a header snippet:
// No authorization
Access-Control-Allow-Origin: *
// Authorization is required, remember that https is required on the server and client
Access-Control-Allow-Origin: https://example.ru
Access-Control- Allow-Credentials: true
// Need access to response headers
Access-Control-Expose-Headers: *

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question