CORS on localhost

[pgarzina]

Describe the bug or question Even though the bug does not originate from single-spa it does affect how the system works, so I am posting it here as well in hopes someone already experienced it and found a solution or can help.

After updating Angular 12 to Angular 13 we are no longer able to access our app served on localhost from outside of it, the request is being blocked by CORS.

this is what worked in Angular 12 ng s --project app-search --disable-host-check --port 4207 --deploy-url https://localhost:4207/ --ssl --public-host https://localhost:4207/ and stopped working in Angular 13.

When in development mode we are accessing our https://localhost:4207/ app from our public domain

We were looking into the docs around Webpack 4 and Webpack 5 and we can see that the disableHostCheck flag is removed from webpack 5 doc but is in webpack 4 docs. We tried playing around with disable host check and allowed hosts passing it to ng serve per official docs (https://angular.io/cli/serve) but with no luck.

Thank you

To Reproduce We have tested this behavior on a clean Angular 13 project without including single-spa and we are aware that this is not a single-spa issue.

Expected behavior Either disable host check or allow hosts should work.

Screenshots and/or console output

Additional context We have opened to issue under angular/cli https://github.com/angular/angular-cli/issues/22992

and under Webpack https://github.com/webpack/webpack/issues/15752 we did try several ways to pass our domain to allowed hosts "serve:single-spa:app-search": "cross-env NODE_ENV=development ng s --project app-search --allowed-hosts domain.com --port 4207 --ssl --public-host https://localhost:4207/" As well as in the extra webpack config, although not sure if the flag is passed in the correct place in the config object

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
const webpackMerge = require('webpack-merge');

module.exports = (angularWebpackConfig, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options);

//https://github.com/single-spa/single-spa-angular/issues/328
  singleSpaWebpackConfig.entry.main = [...new Set(singleSpaWebpackConfig.entry.main)];

  singleSpaWebpackConfig.externals = [...];

  const merged = webpackMerge.merge(singleSpaWebpackConfig, {
    devServer: {
      allowedHosts: 'all',
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: [
                require('postcss-import'),
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        },
      ],
    },
  })
  return merged
};

[szymonworld]

I have the same issue, Angular 13 drop support of --deploy-url and there is no way to redirect assets without CORS errors.

[pgarzina]

@szymonworld if it helps, we are now providing the --deploy-url flag inside angular.json under architect->build->options

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.single-spa.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "preserveSymlinks": true,
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["node_modules/@ng-select/ng-select/themes/ant.design.theme.css", "src/styles.scss"],
            "scripts": [],
            "customWebpackConfig": {
              "path": "extra-webpack.config.js",
              "libraryName": "app-search",
              "libraryTarget": "umd"
            },
            "deployUrl": "https://localhost:4207/"
          },

[pgarzina]

changes can be found here async function updateDeployUrl https://github.com/single-spa/single-spa-angular/commit/c5b46e7854bc37b6197228db90bf0e4295be778f

[szymonworld]

changes can be found here async function updateDeployUrl c5b46e7

Thanks, I setted deployUrl into angular.json but, still my calls are blocked by CORS.

Also, I was trying to use proxy, but the same story:

    singleSpaWebpackConfig.devServer = webpackMerge(singleSpaWebpackConfig.devServer, {
        proxy: {
            '/assets': {
                target: 'http://localhost:4201',
                secure: false,
                changeOrigin: true,
                pathRewrite: {"^/assets" : ""}
            }
        },
        allowedHosts: "all"
    })

[ajaykumarsana]

Hi @joeldenning , Do you have any idea how to fix above issue. We are getting CORS issue after migrating to angular 13 version. FYI: Only below node modules were updated and there were no code changes. "@angular-builders/custom-webpack": "13.0.0", "ng-packagr": "^13.0.0", "single-spa-angular": "6.3.1",

[axeleroy]

Hello,

I'm having a similar issue but from what I gathered, the CORS fails because the pre-flight OPTIONS request returns an HTTP 404 status even though the response has the Access-Control-Allow-Origin: * header:

The issue seem to lie within @angular-builders/custom-webpack (or possibly single-spa-angular's webpack config) as I was able to reproduce the issue with it: just-jeb/angular-builders#1240

[axeleroy]

After further investigation, I'm finally not sure that the issue comes from angular-builders, as I was able to reproduce the issue with @angular-devkit/build-angular:dev-server.

I opened an issue on the angular-cli project: angular/angular-cli#23639

[axeleroy]

Apparently, the issue lies in webpack-dev-server: webpack/webpack-dev-server#4180

[nickdeakin]

I encountered this today after upgrading all angular projects from 12 to 14. Fortunately it doesn't affect builds, only development. In which case we (for now) develop in a no CORS chrome instance.

[axeleroy]

A fix has been merged in angular-cli (angular/angular-cli#23642), hopefully the next release of @angular-devkit/build-angular will fix the issue (I have yet to try with a snapshot build).

[axeleroy]

Finally got to try, updating @angular-devkit/build-angular to 14.1.1 fixes the issue.

[ajaykumarsana]

@axeleroy That's so good to hear, I tried with @angular-devkit/build-angular:14.1.1 yet got the same CORS error. Could you share more details to fix above like package.json or angular.json if you modified? Appreciate your time.

[pgarzina]

ng update @angular/core@14 @angular/cli@14 --force After that I updated most if not all of my dependencies

    "single-spa": "^5.9.4",
    "single-spa-angular": "^7.1.0",

paste your package json/angular json if you can.

[ajaykumarsana]

Hi @pgarzina I've added "baseHref": "http://localhost:4210/" in my angular.json file under architect -> build -> options.

My package.json would look like below

{
  "name": "emp-banner-management-service",
  "version": "0.0.0",
  "scripts": {
    "build": "ng build management-service --configuration production --output-hashing none",
    "build:dev1": "npm run build",
    "build:dev2": "npm run build",
    "build:stg1": "npm run build",
    "build:stg2": "npm run build",
    "build:stg3": "npm run build",
    "build:stg4": "npm run build",
    "build:stg5": "npm run build",
    "build:preprod": "npm run build",
    "build:prod": "npm run build",
    "coverage": "cd coverage/lcov-report && http-server -o",
    "e2e": "ng e2e",
    "lint": "ng lint",
    "ng": "ng",
    "serve": "ng s --project management-service --disable-host-check --port 4210 --live-reload false",
    "sonar": "node_modules/sonar-scanner/bin/sonar-scanner",
    "start": "npm run serve",
    "test": "jest --watchAll",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@ag-grid-community/client-side-row-model": "^24.1.0",
    "@ag-grid-enterprise/all-modules": "^24.1.0",
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "^13.3.0",
    "@angular/elements": "^13.3.0",
    "@angular/forms": "^13.3.0",
    "@angular/localize": "^13.3.0",
    "@angular/platform-browser": "^13.3.0",
    "@angular/platform-browser-dynamic": "^13.3.0",
    "@angular/router": "^13.3.0",
    "@briebug/jest-schematic": "^2.1.1",
    "@formio/angular": "5.0.0",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fullcalendar/angular": "5.11.2",
    "@fullcalendar/core": "5.11.2",
    "@fullcalendar/daygrid": "5.11.2",
    "@fullcalendar/interaction": "5.11.2",
    "@fullcalendar/resource-timeline": "5.11.2",
    "@fullcalendar/timegrid": "5.11.2",
    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "ag-grid-angular": "^24.1.0",
    "ag-grid-community": "^24.1.0",
    "angular2-multiselect-dropdown": "^4.6.4",
    "bootstrap": "4.4.1",
    "formiojs": "^4.14.7",
    "http-server": "^0.12.3",
    "jquery": "^3.5.1",
    "lodash": "^4.17.20",
    "moment": "^2.29.3",
    "ngx-bootstrap": "^6.0.0",
    "ngx-chips": "2.2.1",
    "ngx-countdown": "^12.0.1",
    "rxjs": "~7.4.0",
    "single-spa": "^5.9.4",
    "single-spa-angular": "^7.1.0",
    "tippy.js": "5.1.4",
    "tslib": "^2.3.1",
    "webpack-sources": "^3.2.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "13.1.0",
    "@angular/cli": "~13.3.7",
    "@angular/compiler-cli": "^13.3.0",
    "@angular/language-service": "^13.3.0",
    "@angular-builders/jest": "14.0.1",
    "@angular-devkit/build-angular": "14.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^26.0.10",
    "@types/lodash": "^4.14.182",
    "@types/node": "^12.20.52",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "^26.4.0",
    "jest-preset-angular": "^8.2.1",
    "ng-packagr": "^13.0.0",
    "protractor": "~7.0.0",
    "sonar-scanner": "^3.1.0",
    "style-loader": "^3.3.1",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.6.4"
  }
}

[ajaykumarsana]

@pgarzina

What would be the "@angular-devkit/build-angular" and "@angular-builders/custom-webpack" version which doesn't throw CORS error?

[axeleroy]

Well, I wonder if you shouldn't upgrade to Angular 14 (or at least angular-cli 14) in order to use the latest build-angular. The Angular team did not backport the fix to angular-cli 13.

[pgarzina]

The fix is released in version 14.

    "@angular-devkit/build-angular": "^14.2.1",
    "@angular-builders/custom-webpack": "^14.0.1",

[jaspreet1234567]

Any fix we can have with Angular 13 for this? I have the same issue. http://localhost:4201/main.js is loading but not the json file. It gives the CORS issue.

[axeleroy]

I don't think the fix has been (or will ever be) backported to Angular 13. There shouldn't be anything stopping you from upgrading to Angular 14, the API has been pretty stable between 13 and 14 and versions <15 are no longer supported .