教育改变生活,科泰成就梦想!
免费热线:400-696-8028

教学课堂CLASSROOM

开班信息
热门话题
web开发
目前所在位置: 首页 > web开发

url完整结构以及同源跨域处理的介绍

来源:北大青鸟科泰校区时间:2019-04-09

内容提要: 北大青鸟科泰IT培训学院为大家提供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) Cookie、LocalStorage 和 IndexDB 无法读取。

(2) DOM 无法获得。

(3) AJAX 请求不能发送。

Cookie
Cookie 是服务器写入浏览器的一小段信息,只有同源的网页才能共享。

跨域处理
两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共享 Cookie。

document.domain = ’example.com’;

如果两个网页不同源,就无法拿到对方的DOM。

AJAX

除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),

vue项目中 开发环境的跨域处理

CORS详解
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
联系我们

扫码关注科泰

免费咨询:400-696-8028

报名电话:0731-88122069

咨询QQ: 783463085

学校地址:长沙市开福区湘江北路与开顺路交汇处(金霞跨境产贸城)

在线报名

长沙北大青鸟科泰IT梦想学院·长沙科泰电子商务有限公司·版权所有__湘ICP备19001789号-1