前端，什么是跨域，及跨域常见的解决方案（简讲）

一、认识跨域

1、同源

符合”协议+域名+端口”三者相同，就是同源

2、同源策略

同源策略，其初衷是为了浏览器的安全性，通过以下三种限制，保证浏览器不易受到XSS、CSFR等攻击。

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 Js对象无法获得
AJAX 请求不能发送

3、跨域

引入同源对概念，是因为我们常指对跨域，其实就是浏览器同源策略限制的一类请求场景。

4、常见跨域情景

5、跨域解决方案

通过jsonp跨域
document.domain + iframe跨域
location.hash + iframe
window.name + iframe跨域
postMessage跨域
跨域资源共享（CORS）
nginx代理跨域
nodejs中间件代理跨域
WebSocket协议跨域

注：我的笔记着重学习第 1 和第 6 种方法，其它第不做介绍。

6、*补充

这里不是重点，只要知道我们平时说对跨域是狭义对跨域，仅仅是浏览器出于安全考虑对一种限制，而广义对跨域，包含以下特征：

资源跳转： A链接、重定向、表单提交。
资源嵌入： <link> <script> <img> <frame>等dom标签，还有样式中background:url()、@font-face()等文件外链。
脚本请求： js发起的ajax请求、dom和js对象的跨域操作等。

二、jsonp跨域

1、初步认识 jsonp 跨域

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。 jsonp的缺点是：只能实现get一种请求。

2、原生 js 实现

 <script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack script.src = 'http://www.demo.com:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数，用于数据处理 function onBack(res) { 
     alert(JSON.stringify(res)); } </script>

onBack({
  
  "status": true, "user": "admin"})

在这里，返回内容调用了全局函数 onBack ，并且是带数据的调用。

3、Jquery 实现

$.ajax({
    url: 'http://www.demo.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

4、vue 实现

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => { console.log(res); })

三、跨域资源共享（CORS）

好吧，我的笔记里不全面整理了，直接接入阮一峰老师的博客跨域资源共享 CORS 详解——阮一峰

1.介绍

CORS 是基于 http1.1 的一种跨域解决方案，它的全称是 Cross-Origin Resource Sharing（跨域资源共享）。MDN参考

总体思路：如果浏览器要跨域访问服务器的资源，需要获得服务器的允许。

而一个请求可以附带很多信息，从而对服务器有不同的影响。有的只是获取数据，有的会修改数据。

　　CORS 针对不同的请求，规定了3种交互模式：

简单请求
需要预检的请求
附带身份凭证的请求

　　这3种模式层层递进，请求可以做的事越来越多，要求也越来越严格。

当浏览器发起请求（XMLHttpRequest 还是 fetch api）之前，都会先判定下属于哪一类请求模式

2.简单请求

判定
当请求同时满足以下条件时，浏览器会认为它是一个简单请求：

head 请求，比如当浏览器下载文件时，可能不知道文件有多大，服务器如果立即响应读取文件会占用服务器资源。
但浏览器可能又不想下载了，所以可以先发送一个 head 请求，来让服务器告知这个文件的大小（通过响应头）。
当真正想下载时，再发送下载请求。

举例：

// 简单请求（默认 get 请求）
fetch("http://example.com/api/list");

// 简单请求
fetch("http://example.com/api/list", {
method: "POST"
})

// 非简单请求（请求方法不满足）
fetch("http://example.com/api/list", {
method: "PUT"
})

// 非简单请求（有额外的请求头）
fetch("http://example.com/api/list", {
headers: {
a: 1
}
})

// 非简单请求（请求头 content-type 不满足要求）
fetch("http://example.com/api/list", {
method: "POST",
headers: {
"content-type": "application/json"
}
})

交互规范
　　1.请求头中会自动加入 Origin 字段

　　2.服务器响应头中应包含 Access-Control-Allow-Origin 字段。

　当服务器收到请求后，如果允许请求跨域访问，则需要在请求头中添加该字段。值可以是：

*，表示无限制。
具体的源，比如 http://localhost:5500

交互过程如下图示：

举例：在 http://localhost:5500/index.html 页面发送请求 fetch("http://localhost:3001/api/login", { method: "POST" }) ：

3.非简单请求

这样的请求一般会对服务器有特殊的要求，常见的比如 PUT 或 DELETE 请求，或者 Content-Type: application/json。

交互规范
　　浏览器发送预检请求，询问服务器是否允许
　　预检请求响应，服务器允许
　　浏览器发送真实请求，服务器完成真实的响应
比如对这个请求：Content-Type: application/json + 有自定义的请求头：

fetch("http://localhost:3001/api/login", {
method: "POST"
headers: {
"Content-Type": "application/json",
"a": "aa",
"b": "bb",
},
body: JSON.stringify({
name: "下雪天的夏风",
pwd: "123",
}),
})

3.1发送预检请求

特点：

　　请求方法是 OPTIONS
　　没有请求体
　　请求头中包含
　　　　Origin：请求的源，和简单请求的一样。
　　　　Access-Control-Request-Method：后续真实请求将使用的请求方法。
　　　　Access-Control-Request-Headers：后续真实请求会额外发送的头信息字段。

3.2预检请求响应

服务器收到预检请求后，如果允许这样的请求，需要在响应头中添加如下的字段（不需要响应任何请求体）：

　　Access-Control-Allow-Origin：允许的源，和简单请求的一样。
　　Access-Control-Allow-Methods：表示允许的后续真实的请求方法。
　　Access-Control-Allow-Headers：表示允许改动的请求头。
　　Access-Control-Max-Age：告诉浏览器在多少秒内，对于同样的请求源、方法、头，都不需要再发送预检请求了，非必填。

预检请求的判断可以放到中间件中，也可以使用已有的中间件 koa-cors

3.3浏览器发送真实的请求，服务器完成真实的响应。

一旦通过预检请求，后续过程和简单请求一致。

整个过程：

代码实现：

客户端

<button id="btn">发送请求</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", async function () {
const response = await fetch("http://localhost:3001/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
"a": "aa",
"b": "bb",
},
body: JSON.stringify({
name: "下雪天的夏风",
pwd: "123",
})
});
console.log(response.headers.get("Content-Type")); // 获取指定响应头
response.json().then((res) => console.log(res));
});
</script>

服务端：

const Koa = require("koa");
const Router = require("koa-router");
const { bodyParser } = require("@koa/bodyparser");

const app = new Koa();
const router = new Router();

router.post("/api/login", (ctx) => {
ctx.set("Access-Control-Allow-Origin", "http://localhost:5500");
const { name, pwd } = ctx.request.body;
if (name === "下雪天的夏风" && pwd === "123") {
ctx.set("set-cookie", `token=aaa; domain=localhost; max-age=1000`);
ctx.body = {
code: 200,
msg: "登录成功",
};
} else {
ctx.body = {
code: 500,
msg: "用户名或密码错误",
};
}
});

router.options("/api/login", (ctx) => {
ctx.set("Access-Control-Allow-Origin", "http://localhost:5500");
ctx.set("Access-Control-Allow-Methods", "post");
ctx.set("Access-Control-Allow-Headers", "content-type,a,b");
ctx.set("Access-Control-Max-Age", "10");
ctx.body = "success";
});

app.use(bodyParser()).use(router.routes());
app.listen(3001);

预检请求：

真实的请求：

附带身份凭证
注意到，真实请求会设置 cookie，但并没有设置成功：

这是因为默认情况下，跨域请求并不会设置 cookie，同时请求也不会附带 cookie。

而想要实现附带身份的请求（也就是附带 cookie），需要2点

　　浏览器配置附带 cookie

// xhr
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;

// fetch api
fetch(url, {
credentials: "include" // 默认是 same-origin，同源才会附带。
})

　　服务器响应头中添加字段 Access-Control-Allow-Credentials: true，来明确告知客户端允许这样的凭据。

// koa
ctx.set("Access-Control-Allow-Credentials", "true");

注意：

如果是非简单请求，在预检请求和真实请求中都需要添加该响应头！否则还是会报跨域错误。
对于附带身份的请求，服务器不得设置 Access-Control-Allow-Origin: * 。

posted @ 2025-09-10 09:33 木樨园阅读(350) 评论(0) 收藏举报

刷新页面返回顶部