【发布时间】：2020-11-08 16:23:10
【问题描述】：
由于某种原因，我无法从我的 Flask 后端（端口 5000）存储会话 cookie，并通过 Axios 从我的 Vue 前端（端口 8082）将其作为凭据发送。我在前端创建了一个全局 axios，然后登录获取会话 cookie，然后尝试执行需要身份验证的请求。我看到 cookie 收到来自 /login 的响应，但是当发出下一个请求时它不包含它，导致 401。请求与 Postman 一起工作正常，所以我认为问题在于 CORS 以某种方式阻止发送凭据。
main.js（设置Axios的全局实例）
Vue.prototype.$http = Axios;
Vue.prototype.$http.defaults.withCredentials = true
auth.js（用于登录和获取 cookie 的 Vuex 模块）
this._vm.$http.post(backendUrl+'/api/login', {
email: formEmail,
password: formPassword,
headers: {'Content-type': 'application/json'}
})
.then(function (response) {
console.log(response.data);
router.push('profile');
commit(types.UPDATE_AUTH_SIGN_USER_SUCCESS, response)
commit(types.UPDATE_AUTH_FORM_PASSWORD, '')
commit(types.UPDATE_AUTH_FORM_EMAIL, '')
commit(types.RESET_APP_LOADING)
})
Profile.Vue（要求会话 cookie 身份验证的请求不起作用，401）
this.$http.get(backendUrl+'/api/user/gdpr/fetch', function (response) {
console.log(response);
if (response.data == 0) {
context.dialogGDPR = true;
}
context.$store.commit(types.UPDATE_APP_IS_LOADING, false)
})
对于 Flask 后端，我使用以下方法激活 CORS：
app.py
CORS(app, origins='http://127.0.0.1:8082', supports_credentials=True)
app.config['CORS_HEADERS'] = 'Content-Type'
对于每个已定义的请求：
@cross_origin(origins='http://127.0.0.1:8082', supports_credentials=True)
【问题讨论】：
-
您能看到在应用程序选项卡中设置和更新的 cookie 吗？您是否也尝试过创建一个实例并将其添加到原型而不是完整的 axios 对象，就像这样。 ``` import axios from 'axios' const instance = axios.create({ withCredentials: true }) Vue.prototype.$http = instance; ```
-
@HimanshuPant 我不明白如何使用应用程序选项卡，但我检查了存储选项卡，那里没有 cookie。我尝试使用您建议的实例，但仍然得到 401 并且没有会话 cookie。
-
我写了一篇关于在 CORS here 中使用 cookie 的常见问题解答条目，它可能会帮助您找到问题所在。同一站点上还有一个标头检查器，可以检查您的响应标头是否为 CORS 正确设置了 cookie。如果这没有帮助... 1. 您能否检查任何控制台错误/警告并将它们包含在问题中？ 2. 你能说出你测试过的确切浏览器版本吗？ 3. 您能否发布登录请求的响应标头，尤其是与 cookie 和 CORS 相关的标头？
标签： vue.js flask axios cors flask-cors