本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于url完整结构以及同源跨域处理的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。前言:随着工作时间的增长,前面学过的东西开始慢慢遗忘,抽空的时候就将一些资料整理整理,顺一顺,也当作一种温习。
我只是前端工匠,防止自己成为【一断网就无法工作的程序员】
url的完整结构
协议类型(protocol)
通过URL可以指定的主要有以下几种:http、ftp、gopher、telnet、file等
URL的组成协议 1、protocol(协议):指定使用的传输协议,下表列出 protocol 属性的有效方案名称。
最常用的是HTTP协议,它也是目前WWW中应用最广的协议。
http ―― 超文本传输协议访问该资源。 格式 http://
https ―― 用安全套接字层传送的超文本传输协议访问该资源。 格式 https://
ftp ―― 通过 FTP访问资源。格式 FTP://
mailto ―― 电子邮件地址 通过 SMTP 访问。 格式 mailto:
ldap ―― 轻型目录访问协议搜索
file ―― 资源是本地计算机上的文件。格式file://
news ―― Usenet新闻组
gopher ―― Gopher协议
telnet ―― Telnet协议
主机名(hostname)
是指存放资源的服务器的域名系统 (DNS) 主机名或 IP 地址。
有时,在主机名前也可以包含连接到服务器所需的用户名和密码(格式:username:password)。
端口号(port) 整数,可选,省略时使用方案的默认端口,各种传输协议都有默认的端口号,
如http的默认端口为80,https的默认端口为443
路径及文件名(path) 由零或多个“/”符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
参数(parameters) 传递参数,可有多个参数,用“&”符号隔开,每个参数的名和值用“=”符号隔开
hash值 #是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。
这些字符都不会被发送到服务器端。
改变#不触发网页重载
改变#会改变浏览器的访问历史
默认情况下,Google的网络蜘蛛忽视URL的#部分。
但是,Google还规定,如果你希望Ajax生成的内容被浏览引擎读取,
那么URL中可以使用"#!",Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值
同源策略
协议相同域名相同端口相同
如果非同源,共有三种行为收到限制
1 2 3 |
|
Cookie
Cookie 是服务器写入浏览器的一小段信息,只有同源的网页才能共享。
cookie的组成部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
cookie 在 Request Headers 中的传输格式
1 2 |
|
跨域处理
两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共享 Cookie。
1 |
|
如果两个网页不同源,就无法拿到对方的DOM。
1 |
|
AJAX
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),
vue项目中 开发环境的跨域处理
proxyTable
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
proxyTable中的pathRewrite的/api理解成用‘/api’代替target里面的地址,
后面组件中我们掉接口时直接用api代替
有三种方法规避这个限制
1 2 3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
CORS详解
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
两种请求
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
只要同时满足以下两大条件,就属于简单请求
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
简单请求
对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。
下面是一个例子,浏览器发现这次跨源AJAX请求是简单请求,就自动在头信息之中,添加一个Origin字段。
1 2 3 4 5 6 |
|
上面的头信息中,Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。
如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。
如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。
1 2 3 4 5 |
|
上面的头信息之中,有三个与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。
1 2 3 4 5 6 7 8 |
|
预检请求的回应
服务器收到"预检"请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
以上就是url完整结构以及同源跨域处理的介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5+canvas调用手机拍照功能实现图片上传功能(图文详解上篇)
更多相关阅读请进入《typescript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者