Question

我想在vuejs项目中使用axios处理POST请求，但是axios从未发送正确的csrf cookie。我的vuejs项目在端口8080上的开发人员模式下运行，我的服务器（Spring Boot）在端口9090上的开发模式下运行。我为localhost：8080和127.0.0.1:8080设置了正确的CORS筛选器，接受了OPTIONS，但是在POST上收到403错误

这是我的代码：

axios.post("http://127.0.0.1:9090/api/security/authenticate", 
    this.form,
    {
        withCredentials: true,
        xsrfCookieName: 'XSRF-TOKEN',
        xsrfHeaderName: 'X-XSRF-TOKEN'
    }
).then((response) => {
    console.log("Data: " + response.data);
}).catch((error) => {
    console.log("post error: " + error);
});

这是我对铬的OPTIONS请求的结果：

GENERAL:
Request URL: http://127.0.0.1:9090/api/security/authenticate
Request Method: OPTIONS
Status Code: 200 
Remote Address: 127.0.0.1:9090
Referrer Policy: no-referrer-when-downgrade

RESPONSE HEADERS :
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: http://127.0.0.1:8080
Content-Length: 0
Date: Wed, 11 Dec 2019 21:44:07 GMT
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers

REQUEST HEADERS :
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: 127.0.0.1:9090
Origin: http://127.0.0.1:8080
Referer: http://127.0.0.1:8080/login
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/78.0.3904.108 Chrome/78.0.3904.108 Safari/537.36

我的POST：

GENERAL:
Request URL: http://127.0.0.1:9090/api/security/authenticate
Request Method: POST
Status Code: 403 
Remote Address: 127.0.0.1:9090
Referrer Policy: no-referrer-when-downgrade

RESPONSE HEADERS :
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://127.0.0.1:8080
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: application/json;charset=UTF-8
Date: Wed, 11 Dec 2019 21:44:07 GMT
Expires: 0
Pragma: no-cache
Transfer-Encoding: chunked
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

REQUEST HEADERS :
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Content-Length: 56
Content-Type: application/json;charset=UTF-8
Cookie: XSRF-TOKEN=428229a0-b2b1-4473-ab3a-557e4dbac1b1
Host: 127.0.0.1:9090
Origin: http://127.0.0.1:8080
Referer: http://127.0.0.1:8080/login
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/78.0.3904.108 Chrome/78.0.3904.108 Safari/537.36

REQUEST PAYLOAD :
{login: "xxx", password: "xxx", rememberme: false}
login: "xxx"
password: "xxx"
rememberme: false

发送的CSRF cookie（428229a0 ...）不正确。以前在GET请求中，我获得了另一个CSRF令牌（70705d00 ...）。为什么发送了错误的csrf cookie？

为确保不是vuejs开发模式的结果，我构建了项目并将其部署在nginx服务器上，但是得到了相同的结果。我也尝试在Firefox上，出现相同的错误。

在package.json中，axios的版本为“ ^ 0.19.0”，vuejs的版本为“ ^ 2.6.10”。

我的代码有什么问题？还是关于服务器的配置？

感谢您的帮助！

axios发送错误的csrf cookie

0 个答案: