Доступ к ресурсам publi c из приложения React JS в другое приложение

Question

У меня есть два React JS приложения, работающие на 3000 & 3001 локально, и я хочу сделать следующее: одно приложение имеет publi c asset (/public), то есть файл json, который Я могу получить доступ как,

http://localhost:3000/styles.json

Другое приложение React JS пытается получить к нему доступ, используя ax ios as,

axios.get(`http://localhost:3000/styles.json`)

Но я получаю следующую ошибку в консоли,

Access to XMLHttpRequest at 'http://localhost:3000/styles.json' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ну, это может быть не правильно, но я хочу знать причину, как то, что я могу сделать, чтобы решить ее или нарушение безопасности, с которым оно связано.

Причина, по которой я пытаюсь это Я получил доступ к одному приложению в другом, используя iframe, передав ему собственный путь к папке publi c folder json, но другому приложению не удалось получить к нему доступ.

Answer 1

Ошибка CORS (Cross Origin Resource Sharing) возникает из-за того, что браузеры по умолчанию не загружают данные из другого домена (источника).

В процессе разработки вы можете обойти это, используя что-то вроде https://www.npmjs.com/package/corsproxy, которое в основном добавляет заголовок типа

Access-Control-Allow-Origin: *

к запросам, передаваемым через него. В производственном процессе вам понадобится тот сервер, который вы используете для обслуживания вашего ресурса styles.json, чтобы сделать то же самое: * перестает браузер жаловаться на то, что он находится в другом домене.