vue 折叠面板 带标头_解释了访问控制允许来源标头-带有CORS示例

vue 折叠面板 带标头

Often times when calling an API, you may see an error in your console that looks like this:

通常，在调用API时，您可能会在控制台中看到如下所示的错误：

Access to fetch at 'http://somesite.com' from origin 'http://yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin

In this post, we are going to learn why this error happens and how you can fix it.

在这篇文章中，我们将学习为什么会发生此错误以及如何解决它。

什么是Access-Control-Allow-Origin标头？ (What is the Access-Control-Allow-Origin header?)

Access-Control-Allow-Origin is a CORS header. CORS, or Cross Origin Resource Sharing, is a mechanism for browsers to let a site running at origin A to request resources from origin B.

Access-Control-Allow-Origin是CORS标头。 CORS(即跨源资源共享)是浏览器允许在源A上运行的网站从源B请求资源的一种机制。

Origin is not just the hostname, but a combination of port, hostname and scheme, such as - http://mysite.example.com:8080/

来源不仅是主机名，而且是端口，主机名和方案的组合，例如http://mysite.example.com:8080/

Here's an example of where this comes into action -

这是一个将其付诸实践的示例-

1. I have an origin A: http://mysite.com and I want to get resources from origin B: http://yoursite.com.

   我有一个来源A： http://mysite.com : http://mysite.com ，我想从来源B：http: http://yoursite.com获取资源。

2. To protect your security, the browser will not let me access resources from yoursite.com and will block my request.
   为了保护您的安全，浏览器将不允许我从yoursite.com访问资源，并且会阻止我的请求。
3. In order to allow origin A to access your resources, your origin B will need to let the browser know that it is okay for me to get resources from your origin.
   为了允许来源A访问您的资源，您的来源B将需要让浏览器知道我可以从您的来源获取资源。

Here is an example from Mozilla Developer Network that explains this really well:

这是来自Mozilla开发人员网络的示例，可以很好地说明这一点：

With the help of CORS, browsers allow origins to share resources amongst each other.

在CORS的帮助下，浏览器允许源之间相互共享资源。

There are a few headers that allow sharing of resources across origins, but the main one is Access-Control-Allow-Origin. This tells the browser what origins are allowed to receive requests from this server.

有一些标头允许跨源共享资源，但主要的标头是Access-Control-Allow-Origin 。 这告诉浏览器允许哪些来源接收来自此服务器的请求。

谁需要设置Access-Control-Allow-Origin ？ (Who needs to set Access-Control-Allow-Origin?)

To understand who needs to set this header, consider this scenario: You are browsing a website that is used to view and listen to songs. The website attempts to make a connection to your bank in the background maliciously.

若要了解谁需要设置此标头，请考虑以下情形：您正在浏览一个用于查看和收听歌曲的网站。 该网站试图在后台恶意连接到您的银行。

So who has the ultimate ability to prevent this malicious website from stealing your data from the bank? The bank! So, the bank will need to protect its resources by setting the Access-Control-Allow-Origin header as part of the response.

那么，谁具有阻止该恶意网站从银行窃取您的数据的最终能力？ 银行！ 因此，银行将需要通过将Access-Control-Allow-Origin标头设置为响应的一部分来保护其资源。

Just remember: the origin responsible for serving resources will need to set this header.

只需记住：负责提供资源的来源将需要设置此标头。

如何使用以及何时传递此标头 (How to use and when to pass this header)

Here's an example of values you can set:

这是您可以设置的值的示例：

1. Access-Control-Allow-Origin : * : Allows any origin.

   Access-Control-Allow-Origin : * ：允许任何来源。

2. Access-Control-Allow-Origin : http://mysite.com : Allow requests only from mysite.com.

   Access-Control-Allow-Origin : http://mysite.com ://mysite.com：仅允许来自mysite.com的请求。

实际观看 (See it in action)

Let's look at an example. You can check out this code on my GitHub repo.

让我们来看一个例子。 您可以在我的GitHub存储库中查看此代码。

We are going to build a server on origin A http://localhost:8000 which will send a string of Hellos to an api endpoint. We are going to call with this endpoint by creating a client on origin B http://localhost:3000 and then use fetch to request the resource. We expect to see the string Hello passed by origin A in the browser console of origin B.

我们将在源A http://localhost:8000上构建服务器，该服务器将向Hello api发送一个Hello字符串。 我们将通过在起源B http://localhost:3000上创建一个客户端，然后使用访存来请求资源来与此端点进行调用。 我们期望在起源B的浏览器控制台中看到起源A传递的字符串Hello 。

Let's say we have an origin up on http://localhost:8000 that serves up this resource on /api endpoint. The server sends a response with the header Access-Control-Allow-Origin.

假设我们有一个起源于http://localhost:8000 ，该源在/api端点上提供此资源。 服务器发送带有标头Access-Control-Allow-Origin的响应。

const express = require("express");

const app = express();
const port = process.env.SERVER_PORT || 8000;

// Add Access Control Allow Origin headers
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "https://yoursite.com");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.get("/api", (req, res) => {
  res.json("Hello");
});

app.listen(port, () => console.log(`Listening on port ${port}`));

On the client side, you can call this endpoint by calling fetch like this:

在客户端，您可以通过调用fetch来调用此端点，如下所示：

fetch('http://localhost:8000/api')
.then(res => res.json())
.then(res => console.log(res));

Now open your browser's console to see the result. Since the header is currently set to allow access only from https://yoursite.com, the browser will block access to the resource and you will see an error in your console.

现在打开浏览器的控制台以查看结果。 由于标题当前设置为仅允许从https://yoursite.com访问，因此浏览器将阻止对资源的访问，并且您会在控制台中看到错误。

Now, to fix this, change the headers to this:

现在，要解决此问题，请将标头更改为此：

res.setHeader("Access-Control-Allow-Origin", "*");

Check your browser's console and now you will be able to see the string Hello.

检查浏览器的控制台，现在您将可以看到字符串Hello 。

对我的更多教程和JSBytes感兴趣吗？ 订阅我的时事通讯 。 (Interested in more tutorials and JSBytes from me? Sign up for my newsletter.)

翻译自: https://www.freecodecamp.org/news/access-control-allow-origin-header-explained/

vue 折叠面板 带标头