getting CORS error when running Jasmine and Karma in Angular

user_6703783 0
Viewed 8727

I am running specs and notice the following error in the browser window

zone.js:2990 Access to XMLHttpRequest at 'ng:///DynamicTestModule/NewPracticeQuestionComponent_Host.ngfactory.js' from origin 'http://localhost:9876' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I suppose somewhere in my application, some message has been sent out which is causing CORS issue. I assume its the web server used by Karma which is blocking the request.

Could I configure Karma to disable CORS policy?

karma-jasmine cors
3 Answers

Run your test with --sourcemaps=false and you will get the right error messages.

This is an issue here : https://github.com/angular/angular-cli/issues/7296

Also, Shorthand : 

ng test -sm=false

As of angular 6 the command is:

ng test --source-map=false
user_8864890

I don't think it's a CORS issue unless you're actually calling something across domains.

I had a similar issue with a component setting a date in code returning a similar error. You are probably not setting some required value in the test or you're not calling fixture.detectChanges() in the right spot.

Try setting the --source-map flag to false when you run npm test (or ng test) and you may actually get a more meaningful error.

Posting the affected code in addition to the error message, is usually a good idea.

Cheers, Alberto

user_37863630

I got a full test fixture that failed. Looking at the console log, it contained the following error message:

Access to XMLHttpRequest at 'ng:///CompanyVehicleGridComponent.js' from origin 'http://localhost:9876' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

I am using PrimeNG controls in an Angular 11 application. I am using a PrimeNG grid that displays and deletes rows. Then in the grid, clicking on create and edit button will popup a PrimeNG modal dialog. I find this composition of components an interesting testing challenge. The following illustrates the grid component:

<!-- File: company-vehicle-grid.component.html -->
<div *ngIf='companyvehicles !== undefined'>
    <p-table id='companyvehicles-grid' [value]='companyvehicles'
        [totalRecords]='totalRecords' dataKey='VehicleId'
        [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'>

        ...

    </p-table>
</div>
<!-- modal edit windows -->
<app-company-vehicle-detail-window [companyvehicle]='windowCompanyVehicleInput'
    (closeWin)='closeWin($event)'></app-company-vehicle-detail-window>
...
<!-- End of company-vehicle.grid.component.html -->

This error appeared in the grid test structure. Running the following tesing directive:

ng test --source-map=false

Did not help. I removed the company-vehicle-detail-window and the error disappeared, showing that the issue is due to changes in the modal dialog window. In the process of implementing the PrimeNG modal dialog, I changed some service calls that caused the error and needs to be added to the mock spy service of the grid tests, so the modal dialog can get through the constructor and the ngOnInit.

Additionally, one thing I plan on changing is that when I was developing the detail window, I had the describe set to limit tests to test only the one structure as follows:

fdescribe( 'CompanyVehicleDetailWindowComponent', ( ) => {

I will now set the grid to also test the grid form at the same time, so I will see the error when the change was made.

user_82101130
Related