CORS Error when requesting route in cypress test

Question

I would like to mock some of the API calls done by my SPA. Therefor I am using cypress.JS and checked how to do this by using following test.

it("Then it works", () => {
    axios.defaults.baseURL = 'http://localhost';
    
    cy.server()
    cy.route("GET", "http://localhost/users/", true)
    
    axios.get("/users/").then(response => {
        console.log("received response: " + response)
        expect(response.body).to.equal(true)
    }).catch(error => console.log(error))
})

It does not work I get the error "Access to XMLHttpRequest at 'http://localhost/users/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Is there any way to prevent this error during tests? I don’t understand why Cypress is handling this simple test in a way that this error can occure.

"Localhost should be the same location." — `http://localhost` and `http://localhost:8080` are not the same origin. — Quentin, May 03 '19 at 15:43
Possible duplicate of [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) — Quentin, May 03 '19 at 15:43
It is not a duplicate because I am not asking what the CORS error means. I am asking why Cypress is handling my test in a way that results in this error. I made this now clearer in my question. Your first comment was a good hint. Thank you. — HerrLoesch, May 03 '19 at 18:35

score 31 · Accepted Answer · answered May 03 '19 at 17:28

31

In your cypress.json set chromeWebSecurity to false.

{
  "chromeWebSecurity": false
}

As from cypress documentation here, setting chromeWebSecurity to false allows you to do the following:

Display insecure content
Navigate to any superdomain without cross origin errors
Access cross origin iframes that are embedded in your application.

answered May 03 '19 at 17:28

Diogo Rocha

9,759
4
48
52

2

Please note that this won't work for browsers other than Chrome – Filip Kwiatkowski Apr 07 '21 at 09:10
2

You mean ***chrome-family*** browsers, which includes Electron and Edge, Opera plus a bunch of lesser-known browsers. See [Cross Browser Testing](https://docs.cypress.io/guides/guides/cross-browser-testing) – Dizzy Al Oct 19 '21 at 19:59

score 3 · Answer 2 · answered May 06 '19 at 09:10

The issue was, that I configured cypress with base url localhost:8080

{
  "baseUrl": "http://localhost:8080"
}

but used only local host in my test

   it("Then it works", () => {

    cy.server()           
    cy.route({
        method: 'GET',     
        url: '/users/1',    
        response: true        
    })

    axios.get("http://localhost:8080/users/1").then(response => {
        console.log("received response: " + response)
        expect(response.body).to.equal(true)
    }).catch(error => console.log(error))
})

The test is still not working but my initial question is answered. The error occured because the port was missing. I will update this when I found a solution for my other problem.

CORS Error when requesting route in cypress test

2 Answers2