在 cypress 测试中请求路由时出现 CORS 错误答案

【问题标题】：CORS Error when requesting route in cypress test在 cypress 测试中请求路由时出现 CORS 错误
【发布时间】：2023-03-26 13:08:01
【问题描述】：

我想模拟一些由我的 SPA 完成的 API 调用。因此，我使用的是 cypress.JS 并通过以下测试检查了如何做到这一点。

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))
})

它不起作用我收到错误“从源 'http://localhost:8080' 访问 XMLHttpRequest 在 'http://localhost/users/' 已被 CORS 策略阻止：没有 'Access-Control-请求的资源上存在 Allow-Origin' 标头。"

有什么方法可以防止测试过程中出现这个错误吗？我不明白为什么赛普拉斯会以可能发生此错误的方式处理这个简单的测试。

【问题讨论】：

"本地主机应该是同一个位置。" — http://localhost 和 http://localhost:8080 不是同一个来源。
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header的可能重复
这不是重复的，因为我不是在问 CORS 错误是什么意思。我在问为什么赛普拉斯以导致此错误的方式处理我的测试。我现在在我的问题中更清楚地说明了这一点。你的第一条评论是一个很好的提示。谢谢。

标签： cors cypress

【解决方案1】：

在您的cypress.json 中将chromeWebSecurity 设置为false。

{
  "chromeWebSecurity": false
}

根据 cypress 文档 here，将 chromeWebSecurity 设置为 false 允许您执行以下操作：

显示不安全的内容
导航到任何超级域，不会出现跨域错误
访问嵌入在您的应用程序中的跨源 iframe。

【讨论】：

请注意，这不适用于 Chrome 以外的浏览器
你的意思是 chrome-family 浏览器，其中包括 Electron 和 Edge、Opera 以及一堆鲜为人知的浏览器。见Cross Browser Testing

【解决方案2】：

问题是，我使用基本 url localhost:8080 配置了 cypress

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

但在我的测试中只使用了本地主机

   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))
})

测试仍然无法正常工作，但我最初的问题已得到解答。发生错误是因为缺少端口。当我找到其他问题的解决方案时，我会更新此内容。

【讨论】：