Cypress 如何绕过同源策略登录

最近用Cypress做页面自动化的时候遇到一个问题，前端页面网站与后台登录接口的网站，不属于同一个域名下。

从页面上点击登录按钮之后会报出访问登录接口的请求被cancel，原来的代码如下：

describe('My test case', function () {
 
    it.only('visit home page and sign in', function () {
        cy.visit('https://portal-dev.keyid.cn/login') //访问登录地址
        cy.get('.el-button').click()                //点击登录按钮
        cy.visit('https://portal-dev.keyid.cn/home')  
    })
})

报错如截图所示：

解决办法是用cy.request请求直接调用登录接口

describe('My test case', function () {
    before('sign in', function(){
        cy.request({
            method: 'POST',
            url: 'https://api-dev.keyid.cn/scrm-api/admin/auth/login',
            form: true,
            body: {
                account: "17717823623",
                password: "password"
            },
        })
    })
 
    it.only('visit home page', function () { 
        cy.visit('https://portal-dev.keyid.cn/home')
    })
})

但是home页面仍然没有正常显示，查看一下Cookies、Local Storage和Session Storage，可以发现cookies已经被设置上了值，其他两项都是空白的。

手动登录一下该网站，查看一下Cookies、Local Storage和Session Storage，可以发现Local Storage里面有2个值，Session Storage里面没有值。

只需要在登录成功后通过window.localStorage.setItem增加一下local storage就行。因此最终代码如下：

describe('My test case', function () {
    before('sign in', function(){
        cy.request({
            method: 'POST',
            url: 'https://api-dev.keyid.cn/scrm-api/admin/auth/login',
            form: true,
            body: {
                account: "17717823623",
                password: "password"
            },
        }).then(resp => {
            const localStorage_1 = { "expire": -1, "val": resp.body.data }
            const localStorage_2 = { "expire": -1, "val": `${resp.body.data.login_token}` }
            window.localStorage.setItem('ark-zw-scrm-session', JSON.stringify(localStorage_1))
            window.localStorage.setItem('admin-auth-token', JSON.stringify(localStorage_2))
        })
    })
 
    it.only('visit home page', function () { 
        cy.visit('https://portal-dev.keyid.cn/home')
    })
}) 

至此就可以正常显示页面啦。