URL의 전체 구조 및 동일 출처 간 도메인 처리 소개-H5 튜토리얼-php.cn

이 글은 URL의 전체 구조와 동일 출처 간 도메인 처리에 대한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

머리말: 일하는 시간이 늘어나면서 예전에 배웠던 내용은 점점 잊혀지더라구요. 시간이 나면 정보를 정리해서 정리하는 것도 일종의 복습이에요.
나는 [인터넷이 끊어지면 일할 수 없는 프로그래머]가 되지 않기 위해 프론트엔드 장인일 뿐이다.

URL의 전체 구조

#🎜🎜 #프로토콜 유형(프로토콜)

URL을 통해 지정할 수 있는 주요 유형은 http, ftp, gopher, telnet, file 등입니다. #🎜🎜 #URL 구성 프로토콜 1. 프로토콜(프로토콜): 사용할 전송 프로토콜을 지정합니다. 다음 표에는 프로토콜 속성에 대한 유효한 체계 이름이 나열되어 있습니다.

가장 일반적으로 사용되는 프로토콜은 HTTP이며, 이는 WWW에서 가장 널리 사용되는 프로토콜이기도 합니다.

http - 이 리소스에 액세스하기 위한 하이퍼텍스트 전송 프로토콜입니다. http://
https 형식 - SSL(Secure Socket Layer)을 통해 전달되는 하이퍼텍스트 전송 프로토콜을 사용하여 리소스에 액세스합니다. https://
ftp 형식 - FTP를 통해 리소스에 액세스합니다. FTP://
mailto 형식 - SMTP를 통해 액세스되는 이메일 주소입니다. mailto 형식:
ldap - Lightweight Directory Access Protocol 검색
파일 - 리소스가 로컬 컴퓨터에 있는 파일입니다. 형식 파일://
뉴스 —— 유즈넷 뉴스 그룹
gopher —— Gopher 프로토콜
telnet —— Telnet 프로토콜

host 이름(호스트 이름)

은 리소스가 저장된 서버의 DNS(Domain Name System) 호스트 이름 또는 IP 주소를 나타냅니다.

때로는 서버에 연결하는 데 필요한 사용자 이름과 비밀번호가 호스트 이름 앞에 포함될 수도 있습니다(형식: 사용자 이름:비밀번호).
포트 번호(포트) 정수, 선택 사항, 생략 시 구성표의 기본 포트가 사용됩니다. 다양한 전송 프로토콜에는 기본 포트 번호가 있습니다.
예를 들어 http의 기본 포트는 80이고 기본 포트는 80입니다. https의 포트는 443
경로 및 파일 이름(경로) 0개 이상의 "/" 기호로 구분된 문자열로, 일반적으로 호스트의 디렉터리나 파일 주소를 나타내는 데 사용됩니다.
매개변수(매개변수) 매개변수 전달 , "&" 기호로 구분된 여러 매개변수가 있을 수 있으며, 각 매개변수의 이름과 값은 "=" 기호로 구분됩니다.
hash 값 #은 브라우저의 동작을 안내하는 데 사용되며 다음에서는 전혀 쓸모가 없습니다. 서버 측. 따라서 #은 HTTP 요청에 포함되지 않습니다.
이 문자는 서버로 전송되지 않습니다.
#을 변경하면 페이지 새로고침이 실행되지 않습니다.
#을 변경하면 브라우저의 액세스 기록이 변경됩니다.

기본적으로 Google의 웹 스파이더는 URL의 # 부분을 무시합니다.
그러나 Google은 Ajax에서 생성된 콘텐츠를 브라우징 엔진에서 읽을 수 있도록
URL에 "#!"을 사용하면 Google이 자동으로 뒤에 있는 콘텐츠를 변환한다고 규정합니다. _escaped_fragment_ 값

동일 출처 정책

동일 프로토콜, 동일 도메인 이름, 동일 포트, 동일 #🎜🎜 #

동일한 출처가 아닐 경우 총 3가지 행위가 제한됩니다.

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

로그인 후 복사

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。

로그인 후 복사

요청 헤더의 쿠키 전송 형식

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

로그인 후 복사

교차 도메인 처리

two 첫 번째 - 각 웹페이지의 도메인 이름은 동일하지만, 2차 도메인 이름은 다릅니다. 브라우저는 document.domain을 설정하여 쿠키 공유를 허용합니다.

document.domain = 'example.com';

로그인 후 복사

두 웹페이지의 소스가 다를 경우 상대방의 DOM을 가져올 수 없습니다.

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

로그인 후 복사

AJAX

서버 프록시 설정 외에(브라우저는 동일한 원본 서버를 요청하고 후자는 외부 서비스를 요청),

#🎜 🎜#vue 프로젝트 개발 환경의 크로스 도메인 처리

proxyTable

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

로그인 후 복사

proxyTable의 pathRewrite의 /api는 '/를 사용하는 것으로 이해됩니다. api' 대신 대상 주소 다음 구성 요소에서 인터페이스를 삭제할 때 대신 api를 직접 사용합니다

이 제한을 우회하는 세 가지 방법이 있습니다 #🎜🎜 #

JSONP
WebSocket
CORS

로그인 후 복사

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

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

로그인 후 복사

CORS 자세한 설명

CORS에는 브라우저와 서버 지원이 모두 필요합니다. 현재 모든 브라우저에서 이 기능을 지원하며, IE 브라우저는 IE10 이하일 수 없습니다.

전체 CORS 통신 프로세스는 브라우저에 의해 자동으로 완료되며 사용자 참여가 필요하지 않습니다. 개발자의 경우 동일한 소스의 CORS 통신과 AJAX 통신 간에 차이가 없으며 코드도 완전히 동일합니다. 브라우저가 AJAX 요청이 교차 출처임을 발견하면 자동으로 추가 헤더 정보를 추가하고 때로는 추가 요청이 이루어지지만 사용자는 이를 느끼지 못할 것입니다.

따라서 CORS 통신을 구현하는 핵심은 서버입니다. 서버가 CORS 인터페이스를 구현하면 Cross-Origin 통신이 가능합니다.

두 종류의 요청

브라우저에서는 CORS 요청을 단순 요청(간단한 요청)과 단순하지 않은 요청(간단하지 않은 요청)의 두 가지 범주로 나눕니다.

다음 두 가지 조건이 동시에 충족된다면 간단요청

（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-开头。

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...
로그인 후 복사
预检请求的回应

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