vue.js - 请求头域授权

Question

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

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))        
},

但不幸的是我得到

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

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

标签： vue.jsaxioscors

Answer 1

问题）

1. Access-Control-Allow-Headers并且Access-Control-Allow-Origin是响应标头，而不是请求标头。在请求中指定它们是没有用的。它实际上适得其反，在这里。

2. 为什么要为GET请求指定内容类型？GET请求不应该有正文：

   GET 请求消息中的有效负载没有定义的语义；在 GET 请求上发送有效负载正文可能会导致某些现有实现拒绝该请求。

3. 根据我的测试，您请求的资源 ( https://www.uuidtools.com/api/generate/v1) 似乎可以识别 CORS，但只需要简单的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错误，然后：

]