Introduction à la structure complète du traitement inter-domaines des URL et de même origine-Tutoriel H5-php.cn

Ce que cet article vous apporte est une introduction à la structure complète des URL et au traitement inter-domaines de même origine. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos : À mesure que le temps de travail augmente, les choses que j'ai apprises auparavant sont lentement oubliées. Quand j'ai le temps, j'organise certaines informations et les garde en ordre, ce qui est aussi une sorte de révision.
Je ne suis qu'un artisan front-end pour m'empêcher de devenir un [programmeur qui ne peut pas travailler lorsque Internet est déconnecté]

La structure complète de l'url

Type de protocole (protocole)

Les principaux qui peuvent être spécifiés via l'URL sont les suivants : http, ftp, gopher, telnet, file, etc.
Protocole de composition d'URL 1. protocole (protocole) : Spécifiez le protocole de transmission utilisé, comme indiqué dans le tableau ci-dessous. Un nom de schéma valide pour l'attribut de protocole.
Le protocole le plus couramment utilisé est HTTP, qui est également le protocole le plus utilisé sur le WWW.

http - Hypertext Transfer Protocol pour accéder à cette ressource. Format http://
https - Accédez à la ressource à l'aide du protocole de transfert hypertexte fourni via Secure Socket Layer. Format https://
ftp - accédez aux ressources via FTP. Format FTP://
mailto - adresse e-mail accessible via SMTP. Format mailto :
ldap - Recherche Lightweight Directory Access Protocol
fichier - La ressource est un fichier sur l'ordinateur local. Format de fichier://
news - Groupe de news Usenet
gopher - Protocole Gopher
telnet - Protocole Telnet

nom d'hôte (nom d'hôte)
Fait référence au domaine Nom d'hôte du système de noms (DNS) ou adresse IP du serveur hébergeant la ressource.
Parfois, le nom d'utilisateur et le mot de passe requis pour se connecter au serveur peuvent également être inclus avant le nom d'hôte (format : nom d'utilisateur : mot de passe).
Numéro de port (port) Entier, facultatif, le port par défaut du schéma est utilisé lorsqu'il est omis. Divers protocoles de transmission ont des numéros de port par défaut,
Par exemple, le port par défaut de http est 80 et le port par défaut de. https est 443
Chemin et nom de fichier (path) Une chaîne séparée par zéro ou plusieurs symboles "/", généralement utilisée pour représenter un répertoire ou une adresse de fichier sur l'hôte
Paramètres (paramètres) Paramètres de transmission, il peut y avoir plusieurs paramètres sont séparés par le symbole "&", et le nom et la valeur de chaque paramètre sont séparés par le symbole "="
La valeur de hachage # est utilisée pour guider les actions du navigateur et est totalement inutile côté serveur. Par conséquent, # n’est pas inclus dans la requête HTTP.
Aucun de ces caractères ne sera envoyé au serveur.
Changer # ne déclenchera pas le rechargement de la page
Changer # modifiera l'historique d'accès du navigateur

Par défaut, les robots Web de Google ignorent la partie # de l'URL.
Cependant, Google stipule également que si vous souhaitez que le contenu généré par Ajax soit lu par le moteur de navigation,
alors vous pouvez utiliser "#!" dans l'URL, et Google convertira automatiquement le contenu qui le suit en la chaîne de requête _escaped_fragment Valeur de _

Politique d'origine

Même protocole, même nom de domaine, même port, même port

S'ils ne sont pas de la même origine, il existe trois comportements qui sont restreints

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

Copier après la connexion

Cookie

Le cookie est une petite information écrite par le serveur sur le navigateur. Seules les pages Web de même origine peuvent le faire. être partagé.

Composants du cookie

    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。

Copier après la connexion

Format de transmission des cookies dans les en-têtes de requête

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

Copier après la connexion

Traitement inter-domaines

Deux pages Web à un seul niveau le nom de domaine est le même, mais le nom de domaine de deuxième niveau est différent. Le navigateur permet le partage de cookies en définissant document.domain.

document.domain = 'example.com';

Copier après la connexion

Si les deux pages Web ont des sources différentes, vous ne pouvez pas obtenir le DOM de l'autre partie.

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

Copier après la connexion

AJAX

En plus de mettre en place un serveur proxy (le navigateur demande le même serveur d'origine, qui demande ensuite des services externes),

Environnements de développement croisés dans le traitement de domaine du projet vue

proxyTable

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

Copier après la connexion

Le /api de pathRewrite dans proxyTable est censé utiliser '/api' au lieu de l'adresse dans la cible,
dans les composants suivants Lorsque nous supprimons l'interface, nous utilisons directement l'API à la place

Il existe trois façons de contourner cette restriction

JSONP
WebSocket
CORS

Copier après la connexion

    JSONP
    是服务器与客户端跨源通信的常用方法。
    最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
    它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，
    这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
    
    WebSocket
    WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。
    该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

    CORS
    CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。
    它是W3C标准，是跨源AJAX请求的根本解决方法。
    相比JSONP只能发GET请求，CORS允许任何类型的请求。

Copier après la connexion

Explication détaillée de CORS

CORS doit être pris en charge à la fois par le navigateur et par le serveur. Actuellement, tous les navigateurs prennent en charge cette fonction et le navigateur IE ne peut pas être inférieur à IE10.

L'ensemble du processus de communication CORS est automatiquement complété par le navigateur et ne nécessite pas la participation de l'utilisateur. Pour les développeurs, il n'y a aucune différence entre la communication CORS et la communication AJAX provenant de la même source, et le code est exactement le même. Une fois que le navigateur découvre que la requête AJAX est d'origine croisée, il ajoutera automatiquement des informations d'en-tête supplémentaires, et parfois une requête supplémentaire sera effectuée, mais l'utilisateur ne la ressentira pas.

Par conséquent, la clé pour parvenir à la communication CORS est le serveur. Tant que le serveur implémente l'interface CORS, la communication entre origines est possible.

Deux types de requêtes

Les navigateurs divisent les requêtes CORS en deux catégories : les requêtes simples et les requêtes pas si simples.

Tant que les deux conditions suivantes sont remplies en même temps, il s'agit d'une simple demande

（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
    
凡是不同时满足上面两个条件，就属于非简单请求。

Copier après la connexion

简单请求

对于简单请求，浏览器直接发出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...

Copier après la connexion

上面的头信息中，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

Copier après la connexion

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

Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
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...

Copier après la connexion

预检请求的回应

服务器收到"预检"请求以后，检查了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可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!