在 vue axios 请求中附加标头答案

【问题标题】：Append header in a vue axios request在 vue axios 请求中附加标头
【发布时间】：2021-09-06 21:08:35
【问题描述】：

我有一个 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 问题。

【问题讨论】：

@MichalLevý 谢谢你的回复，知道我怎样才能让它工作吗？

标签： django axios vuejs3

【解决方案1】：

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

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

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

【讨论】：