Introduction to the complete structure of URL and same-origin cross-domain processing

This article brings you an introduction to the complete structure of URL and same-origin cross-domain processing. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Foreword: As working hours increase, the things I have learned before begin to be slowly forgotten. When I have time, I organize some information and keep it in order, which is also a kind of review.
I am just a front-end craftsman to prevent myself from becoming [a programmer who cannot work when the Internet is disconnected]

The complete structure of url

Protocol type (protocol)

The main types that can be specified through the URL are the following: http, ftp, gopher, telnet, file, etc.
URL composition protocol 1. protocol (protocol): Specify the transmission protocol used, listed in the following table A valid scheme name for the protocol attribute.
The most commonly used protocol is HTTP, which is also the most widely used protocol in the WWW.

http - Hypertext Transfer Protocol to access this resource. Format http://
https - Access the resource using Hypertext Transfer Protocol delivered by Secure Sockets Layer. Format https://
ftp - access resources through FTP. Format FTP://
mailto - email address accessed via SMTP. Format mailto:
ldap - Lightweight Directory Access Protocol search
file - The resource is a file on the local computer. Format file://
news —— Usenet news group
gopher —— Gopher protocol
telnet —— Telnet protocol

Hostname (hostname)
Refers to the Domain Name System (DNS) hostname or IP address of the server hosting the resource.
Sometimes, the username and password required to connect to the server can also be included before the host name (format: username:password).
Port number (port) Integer, optional, the default port of the scheme is used when omitted. Various transmission protocols have default port numbers,
For example, the default port of http is 80, and the default port of https is 443
Path and file name (path) A string separated by zero or more "/" symbols, generally used to represent a directory or file address on the host
Parameters (parameters) Passing parameters, there can be multiple Parameters are separated by the "&" symbol, and the name and value of each parameter are separated by the "=" symbol
Hash value # is used to guide the browser's actions and is completely useless to the server. Therefore, # is not included in the HTTP request.
None of these characters will be sent to the server.
Changing # does not trigger a page reload
Changing # will change the browser's access history

By default, Google's web spiders ignore the # part of the URL.
However, Google also stipulates that if you want the content generated by Ajax to be read by the browsing engine,
then you can use "#!" in the URL, and Google will automatically convert the content following it into the query string _escaped_fragment The value of _

Same origin policy

Same protocol, same domain name, same port, same port

If they are not from the same origin, there are three behaviors that are restricted

（1） Cookie、LocalStorage 和 IndexDB 无法读取。 （2） DOM 无法获得。 （3） AJAX 请求不能发送。

Cookie

Cookie is a small piece of information written by the server to the browser. Only web pages with the same origin can be shared.

Components of cookies

Set－Cookie: NAME=VALUE；Expires=DATE；Path=PATH；Domain=DOMAIN_NAME；SECURE NAME=VALUE NAME是该Cookie的名称，VALUE是该Cookie的值。 在字符串“NAME=VALUE”中，不含分号、逗号和空格等字符。 Expires=DATE：Expires变量是一个只写变量，它确定了Cookie有效终止日期。 该属性值DATE必须以特定的格式来书写：星期几，DD－MM－YY HH:MM:SS GMT， GMT表示这是格林尼治时间。 反之，不以这样的格式来书写，系统将无法识别。 该变量可省，如果缺省时，则Cookie的属性值不会保存在用户的硬盘中， 而仅仅保存在内存当中，Cookie文件将随着浏览器的关闭而自动消失。 Domain=DOMAIN－NAME:Domain该变量是一个只写变量， 它确定了哪些Internet域中的Web服务器可读取浏览器所存取的Cookie， 即只有来自这个域的页面才可以使用Cookie中的信息。 这项设置是可选的，如果缺省时，设置Cookie的属性值为该Web服务器的域名。 Path=PATH：Path属性定义了Web服务器上哪些路径下的页面可获取服务器设置的Cookie。 一般如果用户输入的URL中的路径部分从第一个字符开始包含Path属性所定义的字符串， 浏览器就认为通过检查。如果Path属性的值为“/”， 则Web服务器上所有的WWW资源均可读取该Cookie。 Secure：在Cookie中标记该变量， 表明只有当浏览器和Web Server之间的通信协议为加密认证协议时， 浏览器才向服务器提交相应的Cookie。当前这种协议只有一种，即为HTTPS。

The transmission format of cookies in Request Headers

Cookie: KEY=VALUE; KEY=VALUE; KEY=VALUE 是没有 域 和 过期时间 的

Cross-domain processing

The first-level domain names of the two web pages are the same, but Different second-level domain names, browsers allow sharing cookies by setting document.domain.

document.domain = 'example.com';

If the two web pages have different sources, they cannot get the other party's DOM.

典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。

AJAX

In addition to setting up a server proxy (the browser requests the same origin server, and then the latter requests external services),

Cross-domain processing of the development environment in the vue project

proxyTable

dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: './', proxyTable: { '/api': { target: 'http://temp.com',// 请换成你需要跨域请求的地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } }

The /api of pathRewrite in proxyTable is understood to use '/api' instead of the address in the target.
When we drop the interface in the subsequent component Directly use api instead

There are three ways to circumvent this restriction

JSONP WebSocket CORS

JSONP 是服务器与客户端跨源通信的常用方法。 最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。 它的基本思想是，网页通过添加一个