likes
comments
collection
share

URL 组成部分

作者站长头像
站长
· 阅读数 29

URL 组成部分

一个 URL（统一资源定位符，Uniform Resource Locator）包含多个部分，每个部分都定义了如何访问资源及资源的位置。下面是一个完整的 URL 结构：

scheme://username:password@subdomain.domain.tld:port/path?query#fragment

1. Scheme（协议）

URL 的第一个部分是 scheme，也称为协议，它指示客户端（通常是浏览器）应该使用哪种协议来访问资源。常见的协议包括：

  • http：超文本传输协议，用于传输网页数据。
  • https：安全的超文本传输协议，类似于 http 但使用 TLS/SSL 加密。
  • ftp：文件传输协议，用于传输文件。
  • mailto：用于发送电子邮件。
  • file：用于访问本地文件。

2. Username 和 Password（用户名和密码）

username 和 password 是可选的，主要用于需要身份验证的资源访问。它们通常以 username:password@ 的形式出现在 host 之前。例如：

ftp://user:pass@ftp.example.com/

3. Host（主机）

host 指定资源所在的服务器，可以是域名或 IP 地址。域名由多个部分组成，这些部分通过点（.）分隔。让我们详细解释一下域名的组成部分：

域名的组成部分

  • 顶级域名（TLD，Top-Level Domain）：这是域名的最后一部分，通常表示域的类别或国家/地区代码。例如，.com、.org、.net、.cn。

  • 二级域名（Second-Level Domain，SLD）：这是顶级域名之前的部分，通常是组织或公司的名称。例如，在 example.com 中，example 是二级域名。

  • 子域名（Subdomain）：这是在二级域名之前的部分，用于进一步划分域名。例如，在 blog.example.com 中，blog 是子域名。

完整域名示例：

www.example.com

在这个域名中：

  • com 是顶级域名（TLD）。
  • example 是二级域名（SLD）。
  • www 是子域名。

4. Port（端口）

port 是一个可选的部分，指示服务器上用于通信的端口号。如果省略，默认使用协议的标准端口，例如 http 默认端口为 80，https 默认端口为 443。例如：

http://www.example.com:8080/

5. Path（路径）

path 指定服务器上资源的位置，通常表示文件路径或路由。在 URL 中，路径以 / 开头。例如：

http://www.example.com/path/to/resource

6. Query（查询字符串）

query 是可选的部分，用于向资源传递参数。查询字符串以 ? 开始，参数之间用 & 分隔。例如：

http://www.example.com/search?q=openai&lang=en

7. Fragment（片段）

fragment 是可选的部分，用于指定资源中的某个部分。它以 # 开始，例如页面中的某个位置或 ID。例如：

http://www.example.com/page#section2

例子解析

让我们解析一个完整的 URL 例子：

https://username:password@blog.example.com:8080/path/to/resource?query=example#fragment
  • scheme：https
  • username：username
  • password：password
  • host：blog.example.com
    • subdomain：blog
    • second-level domain (SLD)：example
    • top-level domain (TLD)：com
  • port：8080
  • path：/path/to/resource
  • query：query=example
  • fragment：fragment

引入跨域

跨域请求涉及到浏览器安全机制的同源策略，该策略要求某个页面只能与同一来源（协议、主机名和端口相同）的资源进行交互。如果某个请求的任何一部分（协议、主机名或端口）与页面来源不同，就被认为是跨域请求。

为了详细解释跨域和同源策略，我们需要了解什么是“同源”和“跨域”。

同源策略

同源策略（Same-Origin Policy）是浏览器的一种安全机制，目的是防止恶意脚本在一个页面中读取另一个页面的敏感数据。同源策略要求以下三个部分完全相同：

  1. 协议（例如，http 或 https）
  2. 主机名（例如，example.com）
  3. 端口（例如，80 或 443）

如果这三个部分中的任何一个不同，则被认为是跨域。

示例

假设当前网页的 URL 是 https://www.example.com:443，以下请求会被视为同源：

  • https://www.example.com:443/path（相同协议、主机名和端口）

以下请求会被视为跨域：

  • http://www.example.com:443/path（不同协议）
  • https://api.example.com:443/path（不同主机名）
  • https://www.example.com:8080/path（不同端口）

跨域请求

跨域请求是指源（origin）不同的资源请求。浏览器默认会限制这些请求，但可以通过使用 CORS（跨源资源共享）头部来允许跨域请求。跨域请求涉及的情况包括：

  • 不同的协议（如 http 和 https）
  • 不同的主机名（如 www.example.com 和 api.example.com）
  • 不同的端口（如 80 和 8080）

示例分析

以下是对同源和跨域情况的具体分析：

  • 相同协议、主机名和端口：

    • https://www.example.com:443 与 https://www.example.com:443/path
    • 这是同源请求。

  • 不同协议：

    • https://www.example.com 与 http://www.example.com
    • 这是跨域请求，因为协议不同。

  • 不同主机名：

    • https://www.example.com 与 https://api.example.com
    • 这是跨域请求，因为主机名不同。

  • 不同端口：

    • https://www.example.com:443 与 https://www.example.com:8080
    • 这是跨域请求，因为端口不同。

  • 子域名：

    • https://www.example.com 与 https://sub.example.com
    • 这是跨域请求，因为主机名不同，尽管主域相同。

域名等级和跨域

域名等级（如顶级域名、二级域名、子域名等）在跨域请求中的影响：

  • 顶级域名（TLD）不同：如 example.com 与 example.net，这是跨域请求。
  • 二级域名（SLD）不同：如 example.com 与 example.org，这是跨域请求。
  • 子域名不同：如 www.example.com 与 api.example.com，这是跨域请求。

使用 CORS 解决跨域问题

跨源资源共享（CORS）是一种机制，允许服务器通过设置特定的 HTTP 头部来指示浏览器是否允许来自不同源的请求。

服务器设置 CORS

服务器通过设置以下 HTTP 响应头部来允许跨域请求：

  • Access-Control-Allow-Origin：指定允许访问资源的来源。例如，Access-Control-Allow-Origin: https://www.example.com 或 Access-Control-Allow-Origin: *（允许所有来源）。
  • Access-Control-Allow-Methods：指定允许的 HTTP 方法，如 GET、POST。
  • Access-Control-Allow-Headers：指定允许的请求头。
  • Access-Control-Allow-Credentials：指示是否允许发送凭证（如 cookies）。

示例

使用 Express.js 配置 CORS：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'https://www.example.com',
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true
}));

app.get('/data', (req, res) => {
    res.json({ data: 'Sample data' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

总结

跨域请求是指在协议、主机名或端口任意一项不同的情况下发起的资源请求。浏览器通过同源策略限制跨域请求，以保护用户数据的安全。CORS 机制允许服务器通过设置特定的响应头来控制和允许跨域请求，从而实现安全的跨域数据访问。理解同源策略和 CORS 机制对于开发安全的 Web 应用至关重要。

转载自:https://juejin.cn/post/7377645747447824419
评论
请登录