原文地址：跨域（CORS）问题分析与解决方案

新创建一个 VUE 工程，使用 fetch 函数（如下所示） 调用后台 GET 接口，希望能够在后台获得到响应。

fetch('http://127.0.0.1:8080/api/amber/userinfo/hello')
  .then(response => response)

当浏览器访问：http://127.0.0.1:8181/#/ 就出现了问题：后台能够接到请求，但返回响应被浏览器拦截。
查看浏览器的 NETWORK ...

在 Web 开发中，常规的提交数据方式为使用 form 表单，例如：

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="...

Web 开发时，会有需要使用域名的时候，比如以下两个场景：

1. 需要模拟跨域访问
2. 由于网络等限制只能有一个可以访问的 ip 和端口，却需要提供多个相同 context path 的服务

使用 127.0.0.1 和 localhost 可以解决第一个场景的一部分问题，但需要多个域的时候，或者第二个场景，就无能为力了。

虽说可以修改本地的 hosts 文件，将不同域名映射到指定 ip 上，但麻烦不说，在访问非本地服务时，也不容易让所有使用的人都修改 hosts。

下面介绍几个简单，却非常有效的 DNS...

存储在浏览器中的数据，如 localStorage 和 IndexedDB，是以 源（origin） 进行分割的。每个源都拥有自己单独的存储空间，一个源中的 JavaScript 脚本不能对属于其它源的数据进行读写操作，即所谓的 同源策略（SOP）。

然而 Cookie 在受同源策略约束时，使用不同的源的定义方式。

通常来讲：

同源（Same origin），意味着 scheme/host/port 三元组完全相同。任意一部分不同，即为跨源（cross-origin，或称为跨域）。

而根据 ...

在 Origin 和 Site 中，我们介绍了 源 和 站 的概念，这两个概念在浏览器的安全策略中有着广泛的应用，接下来再介绍几个与之相关的概念。

Same Origin Policy（SOP），同源策略，是浏览器的一个重要安全机制，用来限制从某一 Origin（源）加载的文档或脚本，如何与其他源中的资源进行交互。它能帮助隔离潜在的恶意文档，减少被攻击的可能。

跨源网络访问

跨源网络访问，通常分为三类：

1. 跨源写操作（Cross-origin writes）：通常是被允许的，例如链接、重定向，以及...

在 Web 中，origin（源）是指 协议（scheme）+ 主机名（host）+ 端口号（port）。

如：https://alphahinex.github.io/2021/05/16/origin-and-site/

源即为：https://alphahinex.github.io

同源（Same origin），意味着 scheme/host/port 三元组完全相同。任意一部分不同，即为跨源（cross-origin，或称为跨域）。

未明确指定端口时，使用协议默认端口（http 为...