一文带你了解 HTTP 黑科技( 六 ) _HTTP

跨域的特点

下面是跨域问题的例子，看看你是否清楚什么是跨域了

(1) http://example.com/app1/index.html(2) http://example.com/app2/index.html上面这两个 URL 是否具有跨域问题呢？
上面两个 URL 是不具有跨域问题的，因为这两个 URL 具有相同的协议(scheme)和主机(host)

那么下面这两个是否具有跨域问题呢？

http://Example.com:80http://example.com这两个 URL 也不具有跨域问题，为什么不具有，端口不一样啊。其实它们两个端口是一样的。
或许你会认为这两个 URL 是不一样的，放心，关于一样不一样的论据我给你抛出来了

【一文带你了解 HTTP 黑科技】协议和域名部分是不区分大小写的，但是路径部分则根据服务器平台而定。windows 和 Mac OS X 系统是不区分大小写的，而采用UNIX和linux系的服务器系统是区分大小写的，

也就是说上面的 Example.com 和 example.com 其实是一个网址，并且由于两个地址具有相同的 scheme 和 host ，默认情况下服务器通过端口80传递 HTTP 内容，所以上面这两个地址也是相同的。

下面这两个 URL 地址是否具有跨域问题？

http://example.com/app1https://example.com/app2这两个 URL 的 scheme 不同，所以这两个 URL 具有跨域问题

再看下面这三个 URL 是否具有跨域问题

http://example.comhttp://www.example.comhttp://myapp.example.com这三个 URL 也是具有跨域问题的，因为它们隶属于不通服务器的主机 host 。

下面这两个 URL 是否具有跨域问题

http://example.comhttp://example.com:8080这两个 URL 也是具有跨域问题，因为这两个 URL 的默认端口不一样。
同源策略处于安全的因素，浏览器限制了从脚本发起跨域的 HTTP 请求。XMLHttpRequest 和其他 Fetch 接口会遵循同源策略(same-origin policy) 。也就是说使用这些 API 的应用程序想要请求相同的资源，那么他们应该具有相同的来源，除非来自其他来源的响应包括正确的 CORS 标头也可以。
同源策略是一种很重要的安全策略，它限制了从一个来源加载的文档或脚本如何与另一个来源的资源进行交互。它有助于隔离潜在的恶意文档，减少可能的攻击媒介。
我们上面提到，如果两个 URL 具有相同的协议、主机和端口号（如果指定）的话，那么两个 URL 具有相同的来源。下面有一些实例，你判断一下是不是具有相同的来源
目标来源 http://store.company.com/dir/page.html
URLOutcomeReasonhttp://store.company.com/dir2/other.html相同来源只有path不同http://store.company.com/dir/inner/another.html相同来源只有path不同https://store.company.com/page.html不同来源协议不通http://store.company.com:81/dir/page.html不同来源默认端口不同http://news.company.com/dir/page.html不同来源主机不同
现在我带你认识了两遍不同的源，现在你应该知道如何区分两个 URL 是否属于同一来源了吧！
好，你现在知道了什么是跨域问题，现在我要问你，哪些请求会产生跨域请求呢？这是我们下面要讨论的问题
跨域请求跨域请求可能会从下面这几种请求中发出：

调用 XMLHttpRequest 或者 Fetch api 。

XMLHttpRequest 是什么？（我是后端程序员，前端不太懂，简单解释下，如果解释的不好，还请前端大佬们不要胖揍我）
所有的现代浏览器都有一个内置的 XMLHttpReqeust 对象，这个对象可以用于从服务器请求数据。
XMLHttpReqeust 对于开发人员来说很重要， XMLHttpReqeust 对象可以用来做下面这些事情

更新网页无需重新刷新页面
页面加载后从服务器请求数据
页面加载后从服务端获取数据
在后台将数据发送到服务器

使用 XMLHttpRequest(XHR) 对象与服务器进行交互，你可以从 URL 检索数据从而不必刷新整个页面，这使网页可以更新页面的一部分，而不会中断用户的操作。XMLHttpRequest 在 AJAX 异步编程中使用很广泛。
再来说一下 Fetch API 是什么， Fetch 提供了请求和响应对象（以及其他网络请求）的通用定义。它还提供了相关概念的定义，例如 CORS 和 HTTP Origin 头语义，并在其他地方取代了它们各自的定义。