getting CORS error when running Jasmine and Karma in Angular

Question

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?

Does this answer your question? [Angular tests failing with Failed to execute 'send' on 'XMLHttpRequest'](https://stackoverflow.com/questions/45399079/angular-tests-failing-with-failed-to-execute-send-on-xmlhttprequest) — Ajeet Eppakayala, Jan 11 '21 at 13:15

score 14 · Answer 1 · answered May 16 '19 at 19:00

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

score 7 · Answer 2 · answered Feb 27 '19 at 04:02

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

This worked for me. In template I was trying to pass ngIf and check length of array. Putting ? solved the issue for me. — Sudhir Kaushik, Nov 18 '22 at 07:33

score 2 · Answer 3 · answered Apr 17 '21 at 16:33

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.

score 1 · Answer 4 · answered Sep 25 '22 at 17:35

1

In my case it was caused by the html template, not the unit test itself.

Give it a try:

Make sure, that you check that your variables exists first. Use the Safe Navigation Operator where it's needed, in your components html template, or add *ngIf="{variable}" to the respective section.

Example

*ngIf="formGroup.invalid && formGroup.errors

Should be changed to:

*ngIf="formGroup?.invalid && formGroup?.errors

answered Sep 25 '22 at 17:35

Robert Koronczi

51
3

This worked for me, template was referencing a form generated in a different life-cycle hook, adding optional checking resolved – Callat Feb 02 '23 at 18:09

getting CORS error when running Jasmine and Karma in Angular

4 Answers4