添加自定义标头Vue时请求失败答案

【问题标题】：Request Failed when Add custom headers Vue添加自定义标头Vue时请求失败
【发布时间】：2020-10-22 15:14:37
【问题描述】：

我正在向 Axios 发出请求，但是在添加自定义标头时失败（API 需要自定义标头）。如果添加自定义标头，则响应为：

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我看到提出了两个请求： 1-第一个要求：

2- 第二次请求

在 API 中启用了 CORS

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers:  Origin, X-Requested-With, Content- 
Type, Accept, Access-Control-Request-Method,t-id-establecimiento,bt- 
username,bt-nombre-empleado,ipaddress");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");

我在 Vue 中的请求：

let headers = this.getHeader()
    this.$http(`${mUrl}`,{headers})
      .then(function (resp) {
         console.log(resp.data)

      })
 .catch(function (err) {
  console.log('rerrrr' + err)
})

我的自定义标题：

{
 'Authorization': "Bearer " + urlParams.get('token'),
 'Content-Type': 'application/json',
 'bt-id-establecimiento': urlParams.get('bt-id-establecimiento'),
 'bt-username': urlParams.get('bt-username'),
 'bt-nombre-empleado': urlParams.get('bt-nombre-empleado'),
 'ipaddress': urlParams.get('ipaddress'),

}

【问题讨论】：

您能否添加一个代码 sn-p 来显示您如何在服务器上为 http://api.localhost/form/v1/form1/ 端点启用对 OPTIONS 请求的支持？该端点需要配置为以 200 OK 响应 OPTIONS 请求。现在，该端点以 400 Bad Request 错误响应 OPTIONS 请求。

标签： vue.js request fetch

【解决方案1】：

在处理 CORS 错误时，大多数时候您不需要修改请求标头。 99% 的时间，问题出在后端。确保允许 CORS 在：

服务器配置和
应用

如果您使用 XAMPP 或任何 Apache 服务器，默认情况下不会启用 CORS。尽管您已经在应用程序上允许了 CORS，但它仍然会被服务器阻止。

注意：更改配置文件时请务必重启服务器

【讨论】：