6

I'm new to react..I have react application which i migrated to Single-SPA. To integrate my application with the master application(platform which has many Vue single-spa applications) i have re-structured as

MainApp - It includes all the pages related to process - running under localhost:3000

root-html-file - it includes one index.html and package.json file index.html (running under localhost:5000- generate by SPA)

code: root-html-file -> 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();

myapp application working fine as standalone. Only when running root-html-file application (npm run serve) which will load myapp application into it causes CROS origin issue.Please find the screenshot

enter image description here

Please guide me if i'm wrong direction.

Dan Bonachea
  • 2,408
  • 5
  • 16
  • 31
shridhar raju
  • 61
  • 1
  • 3

1 Answers1

2

You need to add the Access Control Allow Origin headers to the React App. In webpack, it can be done by adding the below to the webpack.config.js file

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"
  }
}
Gary Mendonca
  • 1,925
  • 1
  • 13
  • 21