我正在 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 上阅读了关于同一问题的几个答案，标题为 Access-Control-Allow-Origin 但仍然无法弄清楚如何解决这个问题。我不想在 Chrome 中使用扩展程序或使用临时 hack 来解决这个问题。请提出解决上述问题的标准方法。

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

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 

最佳答案

我将着手研究这个复杂的主题。

什么是来源？

来源本身是主机的名称(方案、主机名和端口)，例如https://www.google.com 或可以是本地打开的文件 file:// 等。这是某些内容(例如网页)的来源。当您打开 Web 浏览器并转到 https://www.google.com 时，显示给您的网页的来源是 https://www.google.com 。您可以在 Security 下的 Chrome Dev Tools 中看到:

如果您通过文件浏览器(不通过服务器提供服务)打开本地 HTML 文件，这同样适用:

这与 CORS 问题有什么关系？

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

如果您打开网络浏览器并打开一个本地 HTML 文件，并且在该 HTML 文件中有 JavaScript 想要向 Google 发出请求，例如，您会收到以下错误:

同源策略告诉浏览器阻止跨源请求。在这种情况下，origin null 正在尝试向 https://www.google.com 发出请求(跨域请求)。由于设置了 CORS 策略，浏览器将不允许这样做，并且该策略是不允许跨源请求。

如果我的页面是从本地主机上的服务器提供的，同样适用:

本地主机服务器示例

如果我们使用以下代码托管在 localhost:3000 上运行的我们自己的本地主机 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 上的本地主机服务器提供的，并且通过文件资源管理器，来源与服务器 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 响应的服务器现在包含一个 header ，说明服务器可以发生跨源请求，这意味着浏览器会允许它发生，因此没有错误。

需要说明的是，CORS 策略是现代浏览器的安全功能，用于保护人们免受有害和恶意代码的侵害。

如何解决问题(以下之一)

• 从与您发出请求的位置相同的来源(同一主机)提供页面。
• 通过在响应 header 中明确说明允许服务器接收跨域请求。
• 如果使用 Nginx 等反向代理，请将 Nginx 配置为发送允许 CORS 的响应 header 。
• 不要使用浏览器。例如，使用 cURL，它不像浏览器那样关心 CORS 策略，并且会为您提供所需的内容。

示例流程

以下摘自:Cross-Origin Resource Sharing (CORS)

Remember, the same-origin policy tells the browser to block cross-origin requests. When you want to get a public resource from a different origin, the resource-providing server needs to tell the browser "This origin where the request is coming from can access my resource". The browser remembers that and allows cross-origin resource sharing.

• Step 1: client (browser) request When the browser is making a cross-origin request, the browser adds an Origin header with the current origin (scheme, host, and port).

• Step 2: server response On the server side, when a server sees this header, and wants to allow access, it needs to add an Access-Control-Allow-Origin header to the response specifying the requesting origin (or * to allow any origin.)

• Step 3: browser receives response When the browser sees this response with an appropriate Access-Control-Allow-Origin header, the browser allows the response data to be shared with the client site.

更多链接

这是另一个很好的答案，更详细地说明了正在发生的事情:https://stackoverflow.com/a/10636765/1137669

关于javascript - 使用 Axios 访问控制 Origin Header 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45975135/