Ошибка CORS при синтаксическом разборе JSON при синтаксическом анализе объекта, полного строк

Question

Я считаю, что есть JS фундаментальный, который я забыл, потому что я постоянно сталкиваюсь с этой ошибкой и работаю над ее решением. Однако на этот раз я наткнулся на стену.

Я продолжаю получать эту ошибку CORS от React, когда пытаюсь JSON.parse() объект. Что меня озадачило, так это то, что я думал об ошибках CORS, которые возникают только при запросах. В моем случае я просто пытаюсь проанализировать строку stringified из своего состояния.

<Image className="vendor-man-image col" src={JSON.parse(this.state.sample).thumb} thumbnail />

Объект, который нужно проанализировать, выглядит так:

{
  "title":"Annotation-2020-07-08-144803.png",
  "image":"https://some-link",
  "medium":"https://some-link",
  "thumb":"https://some-link",
  "delete":"https://some-link"
}

Изменить: я не смог Кстати, мой объект уже был stringified. Строковая версия - это то, что возвращается из API.

Answer 1

Дело в том, что вы передаете URL-адрес источнику изображения, и CORS может там потерпеть неудачу. Убедитесь, что URL-адрес из thumb разрешен для CORS.

Answer 2

Пожалуйста, после получения CORS error предупредите или зарегистрируйте для себя Image sr c и посмотрите, где вы пытаетесь с его помощью go. Таким образом вы узнаете, что синтаксический анализ строки "Object object" для источника целевого элемента является недопустимым URL даже до того, как он вызовет CORS error.

Answer 3

<Image className="vendor-man-image col" src={JSON.parse(JSON.Stringify(this.state.sample)).thumb} thumbnail />

решит эту проблему

примечание : вы все еще не передаете текст, вместо этого вы передаете объект.

это в тексте format

'{"имя": "Джон", "возраст": 30, "город": "Нью-Йорк"}'

это все еще объект, который вы снова пытаетесь проанализировать (например, синтаксический анализ от объекта к объекту. Вот и вы получили эту ошибку)

{
  "title":"Annotation-2020-07-08-144803.png",
  "image":"https://some-link",
  "medium":"https://some-link",
  "thumb":"https://some-link",
  "delete":"https://some-link"
}