Einführung in die vollständige Struktur der URL- und domänenübergreifenden Verarbeitung gleicher Herkunft

Dieser Artikel bietet Ihnen eine Einführung in die vollständige Struktur von URLs und die domänenübergreifende Verarbeitung. Freunde in Not können darauf zurückgreifen.

Vorwort: Mit zunehmender Arbeitszeit geraten die Dinge, die ich zuvor gelernt habe, langsam in Vergessenheit. Wenn ich Zeit habe, ordne ich einige Informationen und halte sie in Ordnung, was auch eine Art Rückblick ist.
Ich bin nur ein Front-End-Handwerker, um zu verhindern, dass ich ein [Programmierer werde, der nicht arbeiten kann, wenn die Internetverbindung unterbrochen ist]

Die vollständige Struktur der URL

Protokolltyp (Protokoll)

Die wichtigsten, die über die URL angegeben werden können, sind die folgenden: http, ftp, gopher, telnet, Datei usw.
URL-Zusammensetzungsprotokoll 1. Protokoll (Protokoll) : Geben Sie das verwendete Übertragungsprotokoll an, wie in der Tabelle unten aufgeführt. Ein gültiger Schemaname für das Protokollattribut.
Das am häufigsten verwendete Protokoll ist HTTP, das auch das am weitesten verbreitete Protokoll im WWW ist.

http – Hypertext Transfer Protocol für den Zugriff auf diese Ressource. Formatieren Sie http://
https – Greifen Sie mithilfe des über Secure Sockets Layer bereitgestellten Hypertext Transfer Protocol auf die Ressource zu. Formatieren Sie https://
ftp – greifen Sie über FTP auf Ressourcen zu. Format FTP://
mailto – E-Mail-Adresse, auf die über SMTP zugegriffen wird. Mailto formatieren:
ldap – Lightweight Directory Access Protocol-Suche
Datei – Die Ressource ist eine Datei auf dem lokalen Computer. Formatdatei: //
News – Usenet-Newsgruppe
Gopher – Gopher-Protokoll
Telnet – Telnet-Protokoll

Hostname (Hostname)
Bezieht sich auf die Domain Name System (DNS)-Hostname oder IP-Adresse des Servers, der die Ressource hostet.
Manchmal können der Benutzername und das Passwort, die für die Verbindung zum Server erforderlich sind, auch vor dem Hostnamen stehen (Format: Benutzername:Passwort).
Portnummer (Port) Ganzzahl, optional, der Standardport des Schemas wird verwendet, wenn er weggelassen wird. Verschiedene Übertragungsprotokolle haben Standardportnummern,
Der Standardport von http ist beispielsweise 80 und der Standardport von https ist 443
Pfad und Dateiname (Pfad) Eine durch null oder mehr „/“-Symbole getrennte Zeichenfolge, die im Allgemeinen zur Darstellung eines Verzeichnisses oder einer Dateiadresse auf dem Host verwendet wird
Parameter (Parameter) Übergeben Sie Parameter, es kann sein Mehrere Parameter werden durch das Symbol „&“ getrennt, und der Name und Wert jedes Parameters wird durch das Symbol „=" getrennt.
Hash-Wert # wird zur Steuerung der Browseraktionen verwendet und ist auf der Serverseite völlig nutzlos. Daher ist # nicht in der HTTP-Anfrage enthalten.
Keines dieser Zeichen wird an den Server gesendet.
Durch Ändern von # wird kein Neuladen der Seite ausgelöst.
Durch Ändern von # wird der Zugriffsverlauf des Browsers geändert.

Standardmäßig ignorieren die Webspider von Google den #-Teil der URL.
Google schreibt jedoch auch vor, dass, wenn Sie möchten, dass der von Ajax generierte Inhalt von der Browser-Engine gelesen wird,
Sie „#!“ in der URL verwenden können und Google den darauf folgenden Inhalt automatisch in umwandelt die Abfragezeichenfolge _escaped_fragment Wert von _

Ursprungsrichtlinie

Gleiches Protokoll, gleicher Domänenname, gleicher Port, gleicher Port

Wenn sie nicht von stammen Bei gleichem Ursprung gibt es drei eingeschränkte Verhaltensweisen

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

Cookie

Cookie ist eine kleine Information, die vom Server an den Browser geschrieben wird. Nur Webseiten mit demselben Ursprung können geteilt werden .

Komponenten von 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。

Das Übertragungsformat von Cookies in Anforderungsheadern

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

Domänenübergreifende Verarbeitung

Die Domänennamen der ersten Ebene der beiden Webseiten sind die gleichen, aber die Domänennamen der zweiten Ebene sind unterschiedlich. Browser ermöglichen die gemeinsame Nutzung von Cookies, indem sie document.domain festlegen.

document.domain = 'example.com';

Wenn die beiden Webseiten unterschiedliche Quellen haben, können Sie das DOM der anderen Partei nicht abrufen.

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

AJAX

Zusätzlich zum Einrichten eines Server-Proxys (der Browser fordert den gleichen Ursprungsserver an, der dann externe Dienste anfordert),

Domänenübergreifende Verarbeitung des Entwicklungsumgebung im Vue-Projekt

proxyTable

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

Es wird davon ausgegangen, dass /api von pathRewrite in ProxyTable „/api“ anstelle der Adresse im Ziel verwendet 🎜>Wenn wir die Schnittstelle in der späteren Komponente löschen, verwenden Sie stattdessen direkt API

Es gibt drei Möglichkeiten, diese Einschränkung zu umgehen

JSONP
WebSocket
CORS

rrreeDetaillierte Erklärung von CORS

CORS muss unterstützt werden sowohl vom Browser als auch vom Server. Derzeit unterstützen alle Browser diese Funktion und der IE-Browser darf nicht niedriger als IE10 sein.

Der gesamte CORS-Kommunikationsprozess wird automatisch vom Browser abgeschlossen und erfordert keine Benutzerbeteiligung. Für Entwickler gibt es keinen Unterschied zwischen CORS-Kommunikation und AJAX-Kommunikation aus derselben Quelle, und der Code ist genau derselbe. Sobald der Browser feststellt, dass die AJAX-Anfrage ursprungsübergreifend ist, fügt er automatisch einige zusätzliche Header-Informationen hinzu. Manchmal wird eine zusätzliche Anfrage gestellt, die der Benutzer jedoch nicht spürt.

Daher ist der Server der Schlüssel zum Erreichen der CORS-Kommunikation. Solange der Server die CORS-Schnittstelle implementiert, ist eine Cross-Origin-Kommunikation möglich.

Zwei Arten von Anfragen

Browser unterteilen CORS-Anfragen in zwei Kategorien: einfache Anfragen und nicht ganz so einfache Anfragen.

Solange die folgenden beiden Bedingungen gleichzeitig erfüllt sind, handelt es sich um eine einfache Anfrage

（1）请求方法是以下三种方法之一：
    HEAD
    GET
    POST
    
（2）HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
    
凡是不同时满足上面两个条件，就属于非简单请求。

简单请求

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

下面是一个例子，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。

    
    GET /cors HTTP/1.1
    Origin: http://api.bob.com
    Host: api.alice.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...

上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

    
    
    Access-Control-Allow-Origin: http://api.bob.com
    Access-Control-Allow-Credentials: true
    Access-Control-Expose-Headers: FooBar
    Content-Type: text/html; charset=utf-8

上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。

1. Access-Control-Allow-Origin

   该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

2. Access-Control-Allow-Credentials

   该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

3. Access-Control-Expose-Headers

   该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

预检请求的回应

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

    HTTP/1.1 200 OK
    Date: Mon, 01 Dec 2008 01:15:39 GMT
    Server: Apache/2.0.61 (Unix)
    Access-Control-Allow-Origin: http://api.bob.com
    Access-Control-Allow-Methods: GET, POST, PUT
    Access-Control-Allow-Headers: X-Custom-Header
    Content-Type: text/html; charset=utf-8
    Content-Encoding: gzip
    Content-Length: 0
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Content-Type: text/plain
    
    
上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，
表示http://api.bob.com可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

Das obige ist der detaillierte Inhalt vonEinführung in die vollständige Struktur der URL- und domänenübergreifenden Verarbeitung gleicher Herkunft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!