前端开发，同源策略

问题描述

我在系统中引入axios，其实跟ajax没区别。但是只传递了业务参数，为什么能够通过认证，返回数据呢？

我看了下请求，是自带Cookie的呢，奇怪，我没有设置呀。

问题理解

问了问ai。

在 Axios 中，请求携带 Cookie 是由浏览器的同源策略和 Axios 配置共同决定的，与你代码中设置的 `x-requested-with` 头没有直接关系。具体来说：1. **默认行为**：当请求的 URL 与当前页面是**同源**（协议、域名、端口都相同）时，浏览器会自动在请求头中携带该域名下的 Cookie，无需额外配置。2. **跨域请求携带 Cookie**：如果是跨域请求（域名不同），需要同时满足两个条件才会携带 Cookie：- 在 Axios 中配置 `withCredentials: true`- 服务器响应头中包含 `Access-Control-Allow-Credentials: true`3. 你的代码问题：你在 `.then()` 的回调中才创建 `api` 实例，这是错误的——**请求已经发送完成，此时创建实例毫无意义**。正确的做法是先创建实例再发送请求：```javascript
// 先创建实例并配置
const api = axios.create({headers: {'x-requested-with': 'XMLHttpRequest'},withCredentials: true // 跨域时需要添加这行
})// 再发送请求
api.post('/detection/training/paper/list?' + objToUrlParams(this.queryParams)).then(res => {// 处理响应})
```总结：Cookie 是浏览器自动附加的（同源情况下），跨域时需要额外配置 `withCredentials`。你当前的代码由于实例创建位置错误，可能导致配置未生效。

我去，纸上得知终觉浅。原来这就是同源策略。同源会自动设置，Ajax 请求类似。

Ajax 请求（通常指原生 XMLHttpRequest）携带 Cookie 的机制与 Axios 类似，主要由浏览器的同源策略和请求配置决定：### 1. 同源请求（同域名、协议、端口）
默认情况下，浏览器会自动在 Ajax 请求中携带当前域名下的 Cookie，无需额外配置。示例：
```javascript
const xhr = new XMLHttpRequest();
xhr.open('POST', '/detection/training/paper/list?' + objToUrlParams(this.queryParams));
xhr.setRequestHeader('x-requested-with', 'XMLHttpRequest');
xhr.onload = function() {// 处理响应
};
xhr.send(); // 同源时会自动携带 Cookie
```### 2. 跨域请求（不同域名、协议或端口）
需要手动开启 **withCredentials** 配置，同时服务器需配合设置响应头：- **客户端（Ajax）**：需设置 `xhr.withCredentials = true`
- **服务器**：需返回 `Access-Control-Allow-Credentials: true` 响应头，且 `Access-Control-Allow-Origin` 不能为 `*`（必须指定具体域名）示例：
```javascript
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://other-domain.com/api/endpoint');
xhr.withCredentials = true; // 关键：允许跨域携带 Cookie
xhr.setRequestHeader('x-requested-with', 'XMLHttpRequest');
xhr.onload = function() {// 处理响应
};
xhr.send();
```### 总结
- 同源请求：Cookie 自动携带，无需额外配置
- 跨域请求：需同时满足 - 客户端设置 `xhr.withCredentials = true`- 服务器设置 `Access-Control-Allow-Credentials: true` 且指定明确的 `Access-Control-Allow-Origin`这与 Axios 的 `withCredentials: true` 配置原理一致，本质都是告诉浏览器在跨域时允许携带认证信息（包括 Cookie）。

如何设置上该参数？

这类令牌 Cookie 通常是**服务器在用户登录/验证通过后，通过 `Set-Cookie` 响应头设置**的，浏览器自动保存并在后续请求中携带。前端 JS 也可设置，但受更多安全限制，敏感令牌一般不建议前端手动设置。

在浏览器中设置类似 `PPUI` 这样的 Cookie（通常用作令牌或身份标识），主要通过两种方式实现：**服务器响应头设置** 或 **前端 JavaScript 直接操作**。### 1. 服务器通过响应头 `Set-Cookie` 设置（最常见）
这是最标准、最安全的方式。当客户端（浏览器）向服务器发送请求后，服务器会在 HTTP 响应头中通过 `Set-Cookie` 字段将 Cookie 传递给浏览器，浏览器会自动保存并在后续请求中携带。**示例流程**：
- 客户端发送登录请求（如提交用户名密码）。
- 服务器验证通过后，在响应头中添加：```httpSet-Cookie: PPUI=00OWhqTjVjak9pUVdTeVYyYzFKQ0wyWVROd0FUTTNNRE0z...; Path=/; Domain=example.com; HttpOnly; Secure; SameSite=Lax```
- 浏览器收到响应后，会自动将 `PPUI`  Cookie 保存到本地（根据 `Domain` 和 `Path` 限制作用范围）。
- 后续客户端向该服务器发送请求时，浏览器会自动在请求头 `Cookie` 中携带该字段。### 2. 前端通过 JavaScript 手动设置（`document.cookie`）
前端也可以直接通过 `document.cookie` API 手动设置 Cookie（受浏览器安全策略限制）。**示例代码**：
```javascript
// 设置 PPUI Cookie
document.cookie = "PPUI=00OWhqTjVjak9pUVdTeVYyYzFKQ0wyWVROd0FUTTNNRE0z...; path=/; domain=example.com; max-age=86400; secure";
```**参数说明**：
- `path=/`：Cookie 作用路径（整站有效）。
- `domain=example.com`：Cookie 作用域名（仅该域名下的页面可访问）。
- `max-age=86400`：有效期（秒），86400 表示 1 天。
- `secure`：仅在 HTTPS 协议下生效。
- `HttpOnly`：若添加此参数，前端 JavaScript 无法读取该 Cookie（更安全，防止 XSS 攻击）。### 关键注意事项
1. **同源策略限制**：- 通过 `document.cookie` 设置的 Cookie，`domain` 必须与当前页面域名一致（或为其父域名），否则设置失败。- 服务器通过 `Set-Cookie` 可以设置跨域 Cookie，但需配合 CORS 配置（如 `Access-Control-Allow-Credentials`）。2. **安全属性**：- `HttpOnly`：建议对敏感令牌（如 `PPUI`）添加此属性，防止前端 JS 读取，降低 XSS 风险。- `Secure`：仅在 HTTPS 环境下传递 Cookie，防止中间人攻击。- `SameSite`：限制跨站请求携带 Cookie（如 `SameSite=Lax` 或 `SameSite=Strict`），防止 CSRF 攻击。3. **有效期**：- 若不设置 `max-age` 或 `expires`，Cookie 为“会话级”，关闭浏览器后自动失效。- 若设置了有效期，则为“持久化 Cookie”，会保存到浏览器本地（如硬盘），直到过期。### 总结
`PPUI` 这类令牌 Cookie 通常是**服务器在用户登录/验证通过后，通过 `Set-Cookie` 响应头设置**的，浏览器自动保存并在后续请求中携带。前端 JS 也可设置，但受更多安全限制，敏感令牌一般不建议前端手动设置。

问题总结

纸上得知终觉浅！！！