时间戳

首页 > 解决方案 > 在 vue axios 请求中附加标头

django - 在 vue axios 请求中附加标头

问题描述

我有一个 django 后端和一个 Vue 3 前端。

为了处理某些请求，我的后端需要在请求的标头中添加一个“Id-Client”标头。

开发我的 BE 一切都像一个魅力，但现在我正在编写 FE，我遇到了一些问题。

正如我之前所说，我需要在每个请求的标头中附加一个标头。所以第一步如下：

// Note that the idClient is dynamic and can change.
this.$axios.setHeader('Id-Client', idClient)
const data = await this.$axios.$get(url)

但我无法让它工作，如果我尝试发送该请求，我的 GET 请求将变为（我不知道为什么）一个 OPTIONS 请求，并且我收到错误“跨源资源共享错误：HeaderDisallowedByPreflightResponse”

相反，如果我删除设置的标题

// this.$axios.setHeader('Id-Client', idClient)
const data = await this.$axios.$get(url)

服务器只是正确地响应我，给我请求在标头中缺少“Id-Client”的错误。

我还有一些不需要“Id-client”标头的请求并且这些请求有效，所以我认为这不是 CORS 问题。

标签： djangoaxiosvuejs3

解决方案

好吧，但看起来像 CORS 问题。CORS 策略不是由简单的请求触发的。通过添加自定义标头，您的请求不再简单并触发 CORS 策略（在 GET 之前发送 OPTIONS）

您唯一的选择是配置您的后端服务器以使用正确的标头OPTIONS回复请求-并且（服务器告诉浏览器“是的，我可以接受特定的自定义标头”）Access-Control-Allow-OriginAccess-Control-Allow-Headers

如果（且仅当）您计划在生产中从同一 API 服务器（相同来源）提供您的 Vue SPA，您可以通过使用Webpack Dev server Proxy在开发过程中避免类似的 CORS 问题- 您的 SPA 将向 Webpack Dev 发送 API 请求服务器（用于开发 SPA）和代理会将其路由到您的 Django 开发服务器。这样，来自您的 SPA 的所有请求都来自同一个来源，您根本不需要关心 CORS...

推荐阅读