iis提示网站建设中,app介绍网站模板,网站建设杭州公司,wordpress开启2级域名1 URL
URL#xff08;Uniform Resource Locator#xff09;是互联网上的一种资源的简洁标识。它是一种特定格式的字符串#xff0c;可以指向互联网上的任何资源。当我们在浏览器中输入一个网址#xff0c;它的结构其实暗含着多层信息。以 http://username:passwordwww.exa…1 URL
URLUniform Resource Locator是互联网上的一种资源的简洁标识。它是一种特定格式的字符串可以指向互联网上的任何资源。当我们在浏览器中输入一个网址它的结构其实暗含着多层信息。以 http://username:passwordwww.example.com:80/path/to/file.html?key1value1key2value2#section 为例其各部分功能如下 1.1 协议Protocol
如图中 http 的部分定义数据传输的格式、加密方式、错误处理机制等确保客户端和服务器能正确通信常见的协议有 httpHypertext Transfer Protocol超文本传输协议不加密明文传输安全性较低默认端口80 httpsHTTP Secure安全超文本传输协议加密传输默认端口443用于安全场景如支付、登录等 ftpFile Transfer Protocol文件传输协议用于文件服务器 file用于访问本地文件系统的文件
1.2 认证信息Credentials
如图中 user:pass 的部分用于需要身份验证的服务如私有 FTP 服务器浏览器通常自动隐藏该部分。
1.3 域名Host Name
如图中 site.com 的部分这部分称为域名或主机名它定义了我们想要访问的服务器的地址。这可以是一个IP地址如 http://192.168.1.1或者一个注册的域名如 www.baidu.com。
1.4 端口号Port
如图中 80 的部分它定义了我们要访问服务器上的哪个服务。如果未指定那么默认端口是协议的标准端口例如对于 HTTP 是 80HTTPS 是 443FTP 是 21。
1.5 路径Path
如图中 /pa/th 的部分它定义了服务器上资源的具体位置。
1.6 查询参数Query Parameters
如图中 ?qval 的部分用于向服务器传递参数以 ? 开头通过 keyvalue 的格式传递多个参数用 分隔。
1.7 锚点Hash
如图中 #hash 的部分以 # 开头用于定位网页内的具体位置如 #section1 会让浏览器滚动到页面中 idsection1 的元素。
2 什么是跨域
跨域是指浏览器为了安全性设置的同源策略限制。同源策略Same-Origin Policy 是浏览器的核心安全机制它规定只有协议、域名、端口完全相同的资源才属于同一源Same Origin否则视为跨域Cross-Origin跨域请求会被浏览器默认阻止。那为什么需要跨域限制呢举个例子
若没有同源策略恶意网站 malicious.com 可通过 JS 脚本执行以下操作 在页面中嵌入 http://bank.com 的 iframe银行网站 通过脚本读取 iframe 中的 Cookie含用户登录凭证 将 Cookie 发送到恶意服务器实现身份伪造。
因此浏览器默认禁止跨域请求以下情况都会触发跨域 协议不同http://a.com 访问 https://a.com 域名不同http://a.com 访问 http://b.com 端口不同http://a.com:8080 访问 http://a.com:9090
场景协议域名端口是否同源说明场景 1httpa.com80是完全相同场景 2httpsa.com80否协议不同http → https场景 3httpb.com80否域名不同a.com → b.com场景 4httpa.com8080否端口不同80 → 8080
3 跨域常见场景
在现代前端开发中跨域问题几乎无处不在以下是三大典型场景
3.1 前后端分离项目的端口差异 场景描述 前端项目运行在 http://localhost:3000Vue/React 开发服务器后端 API 部署在 http://localhost:4000Node/Java 服务器端口不同导致跨域。 请求示例 前端通过 fetch(http://localhost:4000/api/users) 调用接口浏览器报错
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://localhost:4000/api/users.
3.2 调用第三方 API 的域名差异 场景描述 前端页面需要请求第三方服务如百度搜索建议、天气接口域名不同触发跨域。 案例百度搜索自动补全 前端请求 URLhttps://www.baidu.com/sugrec?wdacbcallback 域名www.baidu.com 与前端域名如 your-site.com不同触发跨域。 解决方案使用 JSONP 或 CORS需百度服务器配合。
3.3 iframe 嵌套跨域页面的 DOM 操作限制 场景描述 在 a.com 的页面中嵌入 b.com 的 iframe试图通过 JS 操作 iframe 中的 DOM 元素。 代码示例
!-- a.com 的页面 --
iframe srchttp://b.com idmyIframe/iframe
scriptconst iframe document.getElementById(myIframe);// 以下操作会报错跨域限制console.log(iframe.contentWindow.document.body.innerHTML);
/script
错误提示
Uncaught DOMException: Blocked a frame with origin http://b.com
from accessing a cross-origin frame.
同源策略看似给开发增加了复杂度但本质上是为了保护用户数据安全。理解跨域的核心在于掌握 “同源” 的定义协议 域名 端口以及浏览器的安全机制。理解跨域的本质后我们才能更好地选择解决方案。 下一章将介绍第一个跨域方案 JSONP敬请期待
