跨域问题
跨域问题总结
1.为什么会有跨域这个问题？
原因是浏览器为了安全，而采用的同源策略（Same origin policy）
2.什么是同源策略？
1. 同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
2. Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
3. 所谓同源是指：协议，域名（IP），端口必须要完全相同
即：协议、域名（IP）、端口都相同，才能算是在同一个域里。
备注：规则举例如下(假设已有网站地址为：http://study.cn)
image
3.没有同源策略的危险场景：
危险场景：
有一天你刚睡醒，收到一封邮件，说是你的银行账号有风险，赶紧点进www.yinghang.com改密码。你着急的赶紧点进去，还是熟悉的银行登录界面，你果断输入你的账号密码，登录进去看看钱有没有少了，睡眼朦胧的你没看清楚，平时访问的银行网站是www.yinhang.com，而现在访问的是www.yinghang.com，随后你来了一条短信，钱没了，这个钓鱼网站做了什么呢？大概是如下思路：
<iframe id="baidu" src="https://www.baidu.com"></iframe>
<script type="text/javascript">
const iframe = window.frames['baidu']
const inputNode = iframe.document.getElementById('输入敏感信息的input的id')
console.log(inputNode.value)
</script>
3.非同源受到哪些限制？
1. Cookie不能读取；
2. DOM无法获得；
3. Ajax请求不能发送
4.如何在开发中解决跨域问题：
1.JSONP解决发送请求跨域问题：
要明确的是：JSONP不是一种技术，而是程序员“智慧的结晶”（利用了标签请求资源不受同源策略限制的特点）
JSONP需要前后端人员互相配合。
前端页面写法：
<body>
<button id="btn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function () {
//1. 创建一个script标签
var script = document.createElement('script');
//2. 设置回调函数
window.getData = function (data) {
console.log(data);//拿到数据
}
//3. 设置script标签src属性，填写跨域请求的地址
script.src = 'http://localhost:3000/jsonp?callback=getData';
//4. 将script标签添加到body中生效
document.body.appendChild(script);
//5.不影响整体DOM结构，删除script标签
document.body.removeChild(script);
}
</script>
</body>
后端写法：
app.get('/jsonp', (req, res) => {
//解构赋值获取请求参数
const {callback} = req.query
//去数据库查找对应数据
const data = [{name: 'tom', age: 18}, {name: 'jerry', age: 20}];
res.send(callback + '(' + JSON.stringify(data) + ')');
})
2.后台配置cors解决跨域
以Node为例：
res.set('Access-Control-Allow-Origin', 'http://localhost:63342');
3.使用代理服务器
例如：nginx等
jsonp解决跨域
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp解决跨域</title>
</head>
<body>
<button id="btn">点我获取数据</button>
<script src="./jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
* 关于jsonp解决跨域的说明：
* 1.原理：利用了标签发送GET请求“天然跨域”（不受同源策略的限制）
* 2.套路：
* --创建script节点，指定src，利用标签把请求发出去
* --定义好一个处理数据的函数
* --把数据处理函数的名称传递给后端
* --后端返回符合js函数调用语法的字符串
* 3.局限性：
* 1.只能解决GET请求跨域问题
* 2.必须需要后端人员配合
* */
let btn = document.getElementById('btn')
btn.onclick = function () {
//自己实现jsonp解决跨域
//1.动态创建script节点
/*let scriptNode = document.createElement('script')
//2.定义一个接收数据的函数
window.getData = function (data) {
console.log(data)
}
//3.利用标签把请求发出去
scriptNode.src = 'http://localhost:3000/test_get?callback=getData'
//4.将标签放入页面，目的是把请求发出去
document.body.appendChild(scriptNode)*/
//使用jQuery封装的jsonp(标准)
$.ajax('http://localhost:3000/test_get',{
method:'GET',
dataType:'jsonp',
data:{m:1,n:2},
success:function (data) {
console.log(data)
},
error:function (err) {
console.log(err)
}
})
//使用jQuery封装的jsonp(简写)
$.getJSON('http://localhost:3000/test_get?callback=?',{m:3,n:4},(data)=>{
console.log(data)
})
}
</script>
</body>
</html>
server.js
//引入express框架
let express = require('express')
//创建app应用对象
let app = express()
//暴露静态资源
app.use(express.static('public'))
//引入服务器内部具体实现
app.disable('x-powered-by')
//用于解析post请求的请求体参数
app.use(express.urlencoded({extended:true}))
app.get('/test_get',(request,response)=>{
console.log(request.query)
let {callback} = request.query
let arr = [{name:'kobe',age:18},{name:'wade',age:20}]
response.send(`${callback}(${JSON.stringify(arr)})`)
})
app.listen(3000,(err)=>{
if(!err) console.log('该服务器用于测试jsonp解决跨域问题，必须通过webstorm打开网页')
else console.log(err)
})
