第 4 章:跨域
1. 同源策略
- 同源策略(Same-Origin Policy)最早由 Netscape 公司提出,是浏览器的一种安全策略。
- 同源: 协议、域名、端口号 必须完全相同。
- 违背同源策略就是跨域。
- 满足同略策略url可以简写
1.1 同略策略案例
- index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
<h1>666</h1>
<button>点击获取用户数据</button>
<script>
// 获取元素对象
const btn = document.querySelector('button');
// 绑定键盘按下事件
btn.onclick = function () {
// 1. 创建对象
const x = new XMLHttpRequest();
// 2. 初始化 设置类型 与URL
// 这里是因为是满足同源策略的,所以url可以简写
x.open('GET', '/data');
// 3. 发送
x.send();
// 4. 事件绑定
x.onreadystatechange = function () {
// 判断
if (x.readyState === 4) {
// 判断状态码
if (x.status >= 200 && x.status < 300) {
// 处理服务端返回的结果
console.log(x.response);
}
}
}
}
</script>
</body>
</html>
- server3. js
// 引入express模块
const express = require('express')
// 创建web服务器
const app = express()
// 3. 创建路由规则
app.get('/home', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.sendFile(__dirname + '/index.html');
})
app.get('/data', (request, response) => {
response.send('用户数据')
})
// 监听端口启动服务器
app.listen(9000, () => {
console.log('服务器启动成功~,9000端口监听中...')
})
2. 如何解决跨域
2.1 JSONP
- JSONP 是什么
JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,只支持 get 请求。 - JSONP 怎么工作的?
- 在网页有一些标签天生具有跨域能力,比如:img link iframe script。
- JSONP 就是利用 script 标签的跨域能力来发送请求的。
2.1.1 JSONP 的使用
1.动态的创建一个 script 标签
var script = document.createElement("script");
2.设置 script 的 src,设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
3.将 script 添加到 body 中
document.body.appendChild(script);
4.服务器中路由的处理
router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {
name:"孙悟空", age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});
- 原理.html
利用script标签去向服务端发送请求
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsonp 原理</title>
</head>
<body>
<div id="result"></div>
<script>
// 处理数据
function handle(data) {
// 获取result 元素
const result = document.getElementById('result');
// 处理数据
result.innerHTML = data.name;
}
</script>
<script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>
- server.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// jsonp服务
app.all('/jsonp-server', (request, response) => {
const data = {
name: 'zhangsan'
};
// 将数据转化为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 4. 监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动, 8000 端口监听中....');
});
2.1.2 原生 JSONP 的实践
- 需求:在input框输入用户名,鼠标丧失焦点后向服务端发送请求对用户名是否存在的一个检测,服务端直接返回一个已存在,直接返回一个不允许使用,然后把input框的颜色变为红色
- jsonp实践.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsonp 实践</title>
</head>
<body>
用户名:<input type="text" id="username">
<p></p>
<script>
// 获取input 元素
const input = document.querySelector('input');
const p = document.querySelector('p');
// 声明 handle 函数
function handle(data) {
// 修改input框颜色
input.style.backgroundColor ='solid 1px #f00';
// 修改 p 标签的提示文本
p.innerHTML = data.msg;
}
// 绑定事件
input.onblur = function () {
// 获取用户的输入值
let username = this.value;
// 向服务端发送请求 检测用户名是否存在
// 1. 创建 script 对象
const script = document.createElement('script');
// 2. 设置属性
script.src = 'http://127.0.0.1:8000/check-username'
// 3. 插入到页面中
document.body.appendChild(script);
}
</script>
</body>
</html>
- server.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 用户名检测是否存在
app.all('/check-username', (request, response) => {
const data = {
exists: 1,
msg: '用户名已存在'
};
// 将数据转化为字符串
let str = JSON.stringify(data);
// 返回结果
response.end(`handle(${str})`);
});
// 4. 监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动, 8000 端口监听中....');
});
- handle这个函数已经在全局作用域对象下声明了,此时借助script标签向服务端发送请求,返回结果是一个handle函数的调用,浏览器解析器一看能执行没有问题,于是解析执行代码,并且处理数据,这样子我们就实现了跨域。
2.1.3 jQuery 中的 JSONP
- 需求:点击按钮,向8000端口发送请求,返回的结果在div里面做一个呈现
- callback参数这里是固定写法
- jQuery-jsonp.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery-jsonp 案例</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#result {
width: 300px;
height: 100px;
border: solid 1px #089;
}
</style>
</head>
<body>
<button>点击发送 jsonp 请求</button>
<div id="result"></div>
<script>
$('button').eq(0).click(function () {
// 这里的callback是固定写法
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data) {
$('#result').html(`
名称:${data.name}<br>
校区:${data.city}
`)
})
});
</script>
</body>
</html>
- server.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// jquery-jsonp
app.all('/jquery-jsonp-server', (request, response) => {
const data = {
name: 'zhangsan',
city:['北京','上海','广州']
};
// 将数据转化为字符串
let str = JSON.stringify(data);
// 接收 callback 参数
let cb = request.query.callback;
// 返回结果
response.end(`${cb}(${str})`);
});
// 4. 监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动, 8000 端口监听中....');
});
2.2 CORS
-
CORS 是什么?
CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源 -
CORS 怎么工作的?
CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应
以后就会对响应放行。 -
主要是服务器端的设置:
// 设置响应头 设置允许跨域
// * 表示允许客户端发送请求时发送任意的请求头信息
response.setHeader('Access-Control-Allow-Origin', '*'); // 源
response.setHeader('Access-Control-Allow-Headers', '*'); // 头信息
response.setHeader('Access-Control-Allow-Method', '*'); // 方法
2.2.1 CORS 实践
- 需求:点击按钮,向8000端口发送请求,返回的结果在div里面做一个呈现
- CORS.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cors</title>
<style>
#result {
width: 300px;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<button>发送请求</button>
<div id="result"></div>
<script>
const btn = document.querySelector('button');
const div1 = document.querySelector('div');
btn.onclick = function () {
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 2. 初始化设置
xhr.open('GET', 'http://127.0.0.1:8000/cors-server');
// 3. 发送请求
xhr.send();
// 4. 绑定事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 输出响应体
console.log(xhr.response);
div1.innerHTML = xhr.response;
}
}
}
</script>
</body>
</html>
- server.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// cors
app.all('/cors-server', (request, response) => {
// 设置响应头 设置允许跨域
// * 表示允许客户端发送请求时发送任意的请求头信息
response.setHeader('Access-Control-Allow-Origin', '*'); // 源
response.setHeader('Access-Control-Allow-Headers', '*'); // 头信息
response.setHeader('Access-Control-Allow-Method', '*'); // 方法
// 设置响应体
response.send('Hello CORS');
})
// 4. 监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动, 8000 端口监听中....');
});