如何在 vue js 中正确获取数据使用 fetch API？

Question

我正在尝试使用 GET 方法从后端获取数据，但我总是无法获取数据。我收到以下错误：缺少 CORS 标头“Access-Control-Allow-Origin”。我不知道它是怎么发生的，因为我尝试使用 POST 方法到我的后端它工作。

这是我的浏览器工具截图

当我使用fetch 获取数据时，它总是发送 2 个请求，首先是 OPTIONS，然后是 GET。每次请求后我都会收到此错误，然后我尝试通过浏览器工具重新发送请求，并且它可以正常工作。

这是我的代码：

    fetch("https://sample.com/api-v2/product/group",{
  headers:{
    'Token' : 'asdf213sacxcv'
  }
})
  .then(function (response) {
    if (response.status !== 200) {
      console.log(
        "Looks like there was a problem. Status Code: " + response.status
      );
      return;
    }

    // Examine the text in the response
    response.json().then(function (data) {
      console.log(data);
    });
  })
  .catch(function (err) {
    console.log("Fetch Error :-S", err);
  });

提前致谢

Answer 1

您的后端应用程序与您的客户端应用程序在不同的域上运行？ 这会导致 CORS 标头“Access-Control-Allow-Origin”丢失错误，因为基本上您的客户端无权使用其域访问您的后端。 在后端的第一个中间件中添加 cors 标头。 你可以设置一个标题

Access-Control-Allow-Origin: '*'

允许任何源访问后端。

或者将您的特定域设置为只允许它访问您的后端。

Access-Control-Allow-Origin: 'https://example.com'

https://example.com 是您的客户端应用程序的域。