请求头域授权答案

【问题标题】：Request header field authorization请求头域授权
【发布时间】：2021-12-19 12:08:17
【问题描述】：

我正在尝试创建“UUID”表单this Api 调用我正在使用 axios 和 vue.js。这是我的源代码。

generateUUID() {
  // console.log("call generate uuid");
  const headers = {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Headers': '*',  
    'Access-Control-Allow-Origin': '*'
  }
  
  axios.get('https://www.uuidtools.com/api/generate/v1', {
    headers: headers
  }).then(response => console.log(response))        
},

但不幸的是我得到了

CORS 策略已阻止从源“http://localhost:8080”访问“https://www.uuidtools.com/api/generate/v1”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我已经尝试搜索谷歌，并已经对该问题进行了许多回答，但一无所获。

【问题讨论】：

它应该可以在没有headers 选项的情况下工作，删除它。
@Radeanu 它不工作

标签： vue.js axios cors

【解决方案1】：

问题

Access-Control-Allow-Headers 和 Access-Control-Allow-Origin 是 response headers，而不是 request headers。在请求中指定它们是没有用的。这实际上适得其反。
为什么要为GET 请求指定内容类型？ GET 请求为not supposed to have a body：

GET 请求消息中的有效负载没有定义的语义；在 GET 请求上发送有效负载正文可能会导致一些现有的拒绝请求的实现。
根据我的测试，您请求的资源 (https://www.uuidtools.com/api/generate/v1) 似乎可以识别 CORS，但只需要 simple requests，而不是 preflight requests。而且由于您的请求包含不是CORS-safelisted 的标头，它会被您的浏览器预检，并且预检访问控制检查失败。

解决方案

只需发送一个简单 GET 请求（不添加任何标头）：

fetch('https://www.uuidtools.com/api/generate/v1')
  .then(r => r.json())
  .then(arr => arr[0])
  .then(console.log)

控制台输出

没有 CORS 错误，则：

]

【讨论】：