Single-SPA localhost CROS origin Issue- React Application

user_13588010 0
Viewed 3415

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.

single-spa systemjs reactjs
1 Answers

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"
  }
}
user_77570400
Related