使用Axios的访问控制源报头错误

Question

我在React Web应用程序中使用Axios进行API调用。然而，我得到这个错误在Chrome：

XMLHttpRequest cannot load
https://example.restdb.io/rest/mock-data. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access. 

{
    axios
      .get("https://example.restdb.io/rest/mock-data", {
        headers: {
          "x-apikey": "API_KEY",
        },
        responseType: "json",
      })
      .then((response) => {
        this.setState({ tableData: response.data });
      });
}

我还阅读了Stack Overflow上关于同一问题的几个答案，标题为访问-控制-允许-起源，但仍然不知道如何解决这个问题。我不想在Chrome使用扩展或使用临时黑客来解决这个问题。请提出解决上述问题的标准方法。

在尝试了几个答案后，我尝试了这个，

headers: { 
  'x-apikey': '59a7ad19f5a9fa0808f11931',
  'Access-Control-Allow-Origin' : '*',
  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
},

现在我得到的错误是，

Request header field Access-Control-Allow-Origin is not
allowed by Access-Control-Allow-Headers in preflight response 

Answer 1

我有一个类似的问题，我发现在我的情况下，请求中的with credentials:true正在激活CORS检查，而在标头中发出相同的检查将避免检查：

原因：CORS头访问控制允许证书中预期为true

不要使用

withCredentials: true

但是设置

'Access-Control-Allow-Credentials':true

在标题中。

Answer 2

如果您的后端支持CORS，您可能需要在请求中添加以下标题：

headers: {"Access-Control-Allow-Origin": "*"}

[Update]Access Control Allow Origin是一个响应头-因此为了启用CORS-您需要将此头添加到服务器的响应中。

但在大多数情况下，更好的解决方案是配置反向代理，这样您的服务器就能够在不启用CORS的情况下将请求从前端重定向到后端。

您可以在这里找到关于CORS机制的留档：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Answer 3

我要尝试一下这个复杂的课题。

原点本身是主机的名称（方案、主机名和端口），例如https://www.google.com或可以是本地打开的文件文件：//等。。它是某些东西（如网页）的起源。当您打开web浏览器并转到https://www.google.com，显示给您的网页的来源是https://www.google.com。您可以在Chrome开发工具的安全性下看到这一点：

如果您通过文件资源管理器打开本地HTML文件（不通过服务器提供），也适用于此情况：

当您打开浏览器并转到https://website.com，该网站将具有https://website.com。该网站很可能只获取图像、图标、js文件，并对https://website.com，基本上它调用的服务器与从中提供服务的服务器相同。它正在对同一来源进行调用。

如果打开web浏览器并打开一个本地HTML文件，该HTML文件中有javascript想要向google发出请求，例如，您会得到以下错误：

同源策略告诉浏览器阻止跨源请求。在这种情况下，originnull正试图请求https://www.google.com（跨来源请求）。浏览器将不允许这样做，因为设置了CORS策略，该策略是不允许跨源请求。

如果我的页面是从localhost的服务器上提供的，同样适用：

如果我们使用以下代码在localhost:3000上运行自己的localhost API服务器：

const express = require('express')
const app = express()
 
app.use(express.static('public'))

app.get('/hello', function (req, res) {
    // res.header("Access-Control-Allow-Origin", "*");
    res.send('Hello World');
})
 
app.listen(3000, () => {
    console.log('alive');
})

然后从文件资源管理器中打开一个HTML文件（该文件向localhost:3000服务器发出请求）目录。将发生以下错误：

由于网页不是从localhost:3000上的localhost服务器提供的，并且通过文件资源管理器，源与服务器API源不相同，因此正在尝试跨源请求。由于CORS策略，浏览器正在停止此尝试。

但是如果我们取消注释注释行：

const express = require('express')
const app = express()
 
app.use(express.static('public'))

app.get('/hello', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.send('Hello World');
})
 
app.listen(3000, () => {
    console.log('alive');
})

现在再试一次：

它是有效的，因为发送HTTP响应的服务器现在包含了一个标头，说明跨源请求可以发生在服务器上，这意味着浏览器会允许它发生，因此不会出错。

• 从请求所在的同一来源（同一主机）提供页面服务。

以下资料摘自：https://web.dev/cross-origin-resource-sharing/#how-cors有效吗

请记住，主域同源策略告诉浏览器阻止跨源请求。当您想从不同的来源获取公共资源时，资源提供服务器需要告诉浏览器“请求来自的来源可以访问我的资源”。浏览器会记住这一点，并允许跨域资源共享。

>

步骤1：客户端（浏览器）请求当浏览器正在进行跨原点请求时，浏览器添加一个带有当前原点（方案、主机和端口）的原点标头。

步骤2：服务器端的服务器响应，当服务器看到此标头并希望允许访问时，需要在响应中添加一个访问控制允许来源标头，指定请求来源（或*以允许任何来源）

步骤3：浏览器接收响应当浏览器看到带有适当访问控制允许源标题的此响应时，浏览器允许与客户端站点共享响应数据。

下面是另一个很好的答案，更详细地说明发生了什么：https://stackoverflow.com/a/10636765/1137669