由于 csrf 无效，登录请求失败

Question

我正在测试 keystonejs ( http://demo.keystonejs.com/ )的登录页面，但无法获得使用 cypress 成功的请求。没有 cypress 的登录请求具有以下请求标头：

而带有 cypress 测试的请求具有以下请求标头：

我能看到的唯一区别是 cookie 未在 cypress 测试请求中设置。正因为如此，请求得到 403。我实际上使用的是该服务器的本地版本，其中我将电子邮件/密码配置为图像中的那个。演示站点使用该页面中提供的不同集合。

测试很简单：

describe('The Keystone Admin UI Signin Page', function () {
  before(function() {
        cy.visit('http://localhost:3000/keystone/signin')
    })

    it('should signin successfully with valid email/password', function () {
        cy.get('#signin-view input[name=email]').clear().type('user@test.e2e');
        cy.get('#signin-view input[name=password]').clear().type('test');
        cy.get('#signin-view button[type=submit]').click();
        cy.get('#react-root').should('be.visible');
    })
})

无论如何要解决这个问题？

Answer 1

我知道这是一个较老的问题，但我会发布这个以防它对任何人有帮助。

为我解决这个问题的关键是赛普拉斯在每次测试之前清除所有 cookie ( https://docs.cypress.io/api/commands/clearcookies.html# )。

所以在上面的例子中（以及我的经验）：

• 第一个测试（加载页面）运行并通过 - 此时浏览器已经设置了csrftokencookie
• 第二个测试（提交表单）运行，但在此之前赛普拉斯已经删除了csrftokencookie - 因此出现错误

为了解决这个问题，我必须将csrftokenCypress 配置中的cookie列入白名单，这意味着它将免于此清除过程：

Cypress.Cookies.defaults({
    whitelist: "csrftoken"
})

您可以在测试文件中内联执行此操作，但文档建议使用support文件：

放置此配置的一个好地方是在您的 cypress/support/index.js 文件中，因为它是在评估任何测试文件之前加载的。

希望这会有所帮助，斯蒂芬。