fix: correct minor grammatical errors and improve clarity in front-end cross-origin documentation

Author: zhaoshiwei1

docs/goodblog/frontend/network/深入理解前端跨域:从原理到全方位解决方案.md

@@ -1,6 +1,6 @@
 # 万字长文带你理清楚前端跨域所有解决方案的细节
 
-前端时间chrome更新了204版本之后，由于新版的chrome把iframe 放在了独立的进程渲染，导致公司的的一个angular子应用使用iframe嵌套在主应用中发生了跨域，心想在解决问题的时候顺便把跨域相关的知识全部整理一遍吧
+> 前段时间chrome更新了204版本之后，由于新版的chrome把iframe 放在了独立的进程渲染，导致公司的的一个angular子应用使用iframe嵌套在主应用中发生了跨域，心想在解决问题的时候顺便把跨域相关的知识全部整理一遍吧
 
 ## 一、什么是跨域?
 
@@ -27,11 +27,11 @@ https://www.example.com:443/api/posts      ✓ 同源(只是路径不同)
 
 ### 同源策略限制了什么?
 
-在我的开发经验中,同源策略主要限制以下几个方面:
+同源策略主要限制以下几个方面:
 
-1. **Ajax 请求**:不能向不同源的服务器发送请求
-2. **DOM 访问**:不能访问跨域 iframe 的 DOM
-3. **Cookie/LocalStorage/IndexDB**:不能读取跨域的存储数据
+1. **Ajax 请求**: 可以向不同源服务器发起请求，但浏览器会限制 JavaScript 代码读取非同源响应的内容（比如无法访问 response 数据）。也就是说，跨域的 Ajax 请求可以发出，但响应会被同源策略拦截，页面拿不到数据。这就是常见的“跨域请求被阻止”问题。
+2. **DOM 访问**: 不能访问跨域 iframe 的 DOM
+3. **Cookie/LocalStorage/IndexDB**: 不能读取跨域的存储数据
 
 ```mermaid
 graph TD
@@ -67,14 +67,6 @@ fetch("https://api.example.com/users", {
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error("Error:", error));
-
-// 或使用 axios
-axios
-  .post("https://api.example.com/users", {
-    name: "John",
-  })
-  .then((response) => console.log(response.data))
-  .catch((error) => console.error("Error:", error));
 ```
 
 **后端代码**(Node.js + Express):
@@ -123,43 +115,6 @@ app.post("/users", (req, res) => {
 app.listen(3000);
 ```
 
-**使用 cors 中间件**(推荐):
-
-```javascript
-const express = require("express");
-const cors = require("cors");
-const app = express();
-
-// 简单配置
-app.use(cors());
-
-// 详细配置
-app.use(
-  cors({
-    origin: ["https://www.mysite.com", "https://app.mysite.com"],
-    methods: ["GET", "POST", "PUT", "DELETE"],
-    allowedHeaders: ["Content-Type", "Authorization"],
-    credentials: true, // 允许携带 Cookie
-    maxAge: 86400, // 预检请求缓存 24 小时
-  })
-);
-
-// 或者动态配置
-app.use(
-  cors({
-    origin: function (origin, callback) {
-      const whitelist = ["https://www.mysite.com", "https://app.mysite.com"];
-      if (!origin || whitelist.includes(origin)) {
-        callback(null, true);
-      } else {
-        callback(new Error("Not allowed by CORS"));
-      }
-    },
-    credentials: true,
-  })
-);
-```
-
 #### CORS 的两种请求类型
 
 在使用 CORS 时,我发现请求分为两种类型:
@@ -212,8 +167,6 @@ Access-Control-Request-Headers: Content-Type
 
 ### 方案二:JSONP ⭐⭐
 
-JSONP 是我刚开始工作时常用的方案,现在已经很少用了,但了解它的原理还是很有帮助的。
-
 #### 原理说明
 
 JSONP 利用了 `<script>` 标签不受同源策略限制的特性。原理就是:
@@ -250,85 +203,6 @@ function jsonp(url, callbackName, callback) {
 jsonp("https://api.example.com/users", "handleUserData", function (data) {
   console.log("收到数据:", data);
 });
-
-// 更完善的 JSONP 实现(支持 Promise)
-function jsonpPromise(url, params = {}) {
-  return new Promise((resolve, reject) => {
-    // 生成唯一的回调函数名
-    const callbackName = `jsonp_${Date.now()}_${Math.random().toString(36).substr(2)}`;
-
-    // 定义全局回调函数
-    window[callbackName] = function (data) {
-      resolve(data);
-      cleanup();
-    };
-
-    // 创建 script 标签
-    const script = document.createElement("script");
-
-    // 拼接 URL 参数
-    const queryString = Object.keys(params)
-      .map((key) => `${key}=${encodeURIComponent(params[key])}`)
-      .join("&");
-
-    script.src = `${url}?callback=${callbackName}${queryString ? "&" + queryString : ""}`;
-
-    // 错误处理
-    script.onerror = function () {
-      reject(new Error("JSONP request failed"));
-      cleanup();
-    };
-
-    // 超时处理
-    const timeout = setTimeout(() => {
-      reject(new Error("JSONP request timeout"));
-      cleanup();
-    }, 10000);
-
-    function cleanup() {
-      clearTimeout(timeout);
-      if (script.parentNode) {
-        document.body.removeChild(script);
-      }
-      delete window[callbackName];
-    }
-
-    document.body.appendChild(script);
-  });
-}
-
-// 使用 Promise 版本
-jsonpPromise("https://api.example.com/users", { page: 1, limit: 10 })
-  .then((data) => console.log("用户列表:", data))
-  .catch((error) => console.error("请求失败:", error));
-```
-
-**后端代码**(Node.js):
-
-```javascript
-const express = require("express");
-const app = express();
-
-app.get("/users", (req, res) => {
-  const callbackName = req.query.callback;
-
-  if (!callbackName) {
-    return res.status(400).json({ error: "Missing callback parameter" });
-  }
-
-  const data = {
-    users: [
-      { id: 1, name: "John" },
-      { id: 2, name: "Jane" },
-    ],
-  };
-
-  // 返回 JavaScript 代码,调用回调函数
-  res.type("application/javascript");
-  res.send(`${callbackName}(${JSON.stringify(data)})`);
-});
-
-app.listen(3000);
 ```
 
 #### 优劣势分析