Ошибка блокировки чтения из разных источников в реагирующих - PullRequest
Новая
       54

Ошибка блокировки чтения из разных источников в реагирующих

0 голосов
/ 19 февраля 2019

Я изучаю ReactJS.Я использую fetch для получения данных из API.Для этого я использовал приведенный ниже код. 

 fetch('http://myurl.com/api')
              .then(res => res.json())
              .then(res => console.log(res));

API работает со статусом 200 ok, но в ответе Ничего не отображается для предварительного просмотра , а в консоли выводится сообщение об ошибке

Блокировка перекрестного чтения (CORB) заблокировала ответ перекрестного источника http://myurl.com/api с приложением MIME-типа / json.См. https://www.chromestatus.com/feature/5629709824032768 для получения более подробной информации.

Я также добавил заголовки в приведенном ниже коде. 

 fetch("http://xxx.xxx.xxx.xxx:8081/api/category/popular",{
                 method: 'GET',
                  headers: {
                    'Access-Control-Allow-Origin': '*',
                  },
              })

У меня ниже json в ответе API 

  {  
   "data":[  
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c2f74e8a4d846591b2b1a41",
         "name":"Shop",
         "modified_at":"2019-01-04T14:59:52.791Z",
         "created_at":"2019-01-04T14:59:52.791Z"
      },
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c2f7566a4d846591b2b1a42",
         "name":"Home Service",
         "modified_at":"2019-01-04T15:01:58.507Z",
         "created_at":"2019-01-04T15:01:58.507Z"
      },
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c5c2dd30d017c401ec17253",
         "name":"Test",
         "modified_at":"2019-02-07T13:08:35.653Z",
         "created_at":"2019-02-07T13:08:35.653Z",
         "__v":0
      }
   ]
}

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

Блокировка чтения из разных источников (CORB).Он предназначен для предотвращения доставки браузером определенных сетевых ответов между источниками на веб-страницу.

Сначала убедитесь, что эти ресурсы снабжены правильным «Content-Type», т. Е. Для JSON MIME type - »text / json "," application / json ", MIME-тип HTML -" text / html ".

Второй: установить учетные данные одного и того же происхождения 

 fetch("https://example.com/api/request", {
            method: 'GET',
            body: JSON.stringify(data),
            credentials: "same-origin", //include, same-origin
            headers: {Accept: 'application/json', 'Content-Type': 'application/json',},
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))
0 голосов
/ 19 февраля 2019

Обычно заголовок CORS (требует изменения сервера), вам необходимо установить разрешенный домен запроса на сервере API.

...