3跨域
3.1同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出,是浏览器的一种安全策略
同源: 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
如何解决跨域问题?
解决方案1
利用JSONPj解决跨域,JSONP是一个非官方解决跨域的解决方案,只支持get请求
JSONP的工作原理
就是利用某些具有跨域标签的能力,比如a标签、img标签、scrpit标签
而JSOPN就是利用script具有跨域能力来解决get请求的
(JSONP、check-username、jquery-json) 服务端
// 1.引入express文件
const { response, request } = require('express')
const express = require('express')
// 创建应用对象
const app = express()
// jsonp服务
app.all('/jsonp-server', (request, response) => {
// response.send(console.log('Hello JSONP'))
const data = {
name: '张三'
}
// 将数据转换为字符串
let str = JSON.stringify(data)
// 返回结果
response.end(`handler(${str})`)
})
//用户检测是否存在
app.all('/check-username',(request,response)=>{
const data = {
name:'张三'
msg:'用户已经存在'
}
// 将数据转换为字符串
let str = JSON.stringify(data)
// 返回结果
response.end(`handler(${str})`)
})
//jQuery中实现JSON请求
app.all('/jquery-json', (request, response) => {
// response.send(console.log('Hello JSONP'))
const data = {
name: '张三',
age: 20
}
// 将数据转换为字符串
let str = JSON.stringify(data)
// 接收callback 参数
let cb = request.query.callback
// 返回结果
response.end(`${cb}(${str})`)
})
app.listen('8000',()=>{
console.log('服务器已经启动。。。')
})
JSON数据返回格式是一个对象,因此我们需要使用JSON.stringify()转换成我们想要的JSON字符串格式,一般我们也会使用JSON.parse()方法解析JSON字符串
JSON初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 300px;
height: 100px;
border: 1px solid #78a;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
// 处理数据
function handler(data) {
const result = document.getElementById('result')
result.innerHTML = data.name
}
</script>
<script src="http://127.0.0.1:8000/jsonp-server">
</script>
</body>
</html>
JSON实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例</title>
</head>
<body>
<input type="text" id="userName">
<p></p>
<script>
// 获取元素
const input = document.getElementById('userName')
const p = document.querySelector('p')
// 声明handler函数
function handler(data) {
// 设置边框颜色
input.style.border = "1px solid red"
// 设置内容
p.innerHTML = data.msg
}
input.onblur = function () {
// 获取用户输入的值
let username = this.value
//向服务器发送请求 检测用户是否存在
// 创建script标签
const script = document.createElement('script')
// 设置script中的src属性
script.src = 'http://127.0.0.1:8000/check-username'
// 将script标签插入到文档中
document.body.appendChild(script)
}
</script>
</body>
</html>
jQuery中实现JSON请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery-JSONP</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
#result {
width: 300px;
height: 200px;
border: 1px solid #539;
}
</style>
</head>
<body>
<button>点击我发送请求</button>
<div id="result"></div>
<script>
$(function () {
$('button').eq(0).click(function () {
$.getJSON('http://127.0.0.1:8000/jquery-json?callback=?', function (data) {
$('#result').html(`
姓名:${data.name}<br />
年龄:${data.age}
`)
})
})
})
</script>
</body>
</html>
解决方案2 使用Cors
Cros是什么:
全称(Cros-Origin-Resocure-Sharing) 跨域资源共享 是官方的一种解决方案 它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源
Cros工作原理
通过设置响应头告诉浏览器,该请求是允许跨域的,让后浏览器通过响应允许跨域操作
Cros使用
router.get(“/testAJAX” , function (req , res) {
//通过 res 来设置响应头,来允许跨域请求
//res.set(“Access-Control-Allow-Origin”,“http://127.0.0.1:3000”);
res.set(“Access-Control-Allow-Origin”,“*”);
res.send(“testAJAX 返回的响应”);
});
Cros跨域服务端
const express = require('express')
//创建应用
const app = express()
//Cros服务
app.all('/cros-server',(request,response)=>{
//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin', '*') //所有网页使用
response.setHeader('Access-Control-Allow-Headers', '*')
response.setHeader('Access-Control-Allow-Method', '*')
// response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500') //指定网页使用
response.send('Hello Cors')
})
//监听
app.listen('8000',()=>{
console.log('服务器监听中。。。')
})
Cros客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cros</title>
<style>
#result {
width: 300px;
height: 300px;
border: 1px solid #856;
}
</style>
</head>
<body>
<button>点击我发送请求</button>
<div id="result">
</div>
<script>
const btn = document.querySelector('button')
const result = document.getElementById('result')
btn.onclick = function () {
// 1.创建对象
const x = new XMLHttpRequest()
// 初始化
x.open('get', 'http://127.0.0.1:8000/cros-server')
// 发送
x.send()
// 绑定事件 处理结果
x.onreadystatechange = function () {
if (x.readyState === 4) {
if (x.status >= 200 && x.status < 300) {
// 输出响应体
console.log(x.response);
result.innerHTML = x.response
}
}
}
}
</script>
</body>
</html>
解决方案3
使用代理 Proxy 解决跨域