Проблема с источником CROS на локальном узле SPA - приложение React

Question

Я новичок в реагировании.. У меня есть приложение для реагирования, которое я перешел на Single-SPA. Чтобы интегрировать мое приложение с основным приложением (платформа, на которой есть много приложений с одним спа-центром Vue), я реструктурировал его как

MainApp - включает в себя все страницы, относящиеся к процессу - работает под localhost: 3000

root-html-file - он включает в себя один файл index.html и package.json index.html (работает под localhost:5000- генерируется SPA)

код: root-html-файл -> index.html

<script type="systemjs-importmap">
      {
        "imports": {
    "myapp": "http://localhost:3000/",
    "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
    "react": "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"
     }}</script>

Promise.all([System.import('single-spa'),System.import('react')]).then(function (modules) {
          var singleSpa = modules[0];
            singleSpa.registerApplication(
                'myapp',
                () => System.import('myapp'),
                location => true
            );
          singleSpa.start();

Приложение my app нормально работает как автономное приложение. Только при запуске приложения root-html-file (npm run serve), которое загружает приложение my app в него, возникает проблема с источником CROS. Найдите снимок экрана, введите описание изображения здесь

Пожалуйста, наставьте меня, если я ошибаюсь.

Answer 1

Вам нужно добавить заголовки Access Control Allow Origin в приложение React. В webpack это можно сделать, добавив в файл webpack.config.js следующее:

devServer: {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}