请求头域授权

Posted 2023-03-04

【中文标题】请求头域授权

【英文标题】：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 它不工作

【参考方案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 错误，则：

]