跨域问题
同源策略
浏览器的安全功能，协议、域名、端口都相同的地址称为同源
同源策略
同源策略是浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，不能读写对方资源。所谓同源是指"协议+域名+端口"三者相同。
=> 浏览器
=> 同源: 当访问从一个地方访问另一个地方资源时，如果 协议+域名+端口 相同就是同源访问
协议+域名+端口
http://www.qianfeng.com:8080/login.html
|
http://www.qianfeng.com:8080/index.html
跨域问题
使用AJAX技术（XMLHttpRequest 对象），从一个网页去请求另一个网页资源时，违反浏览器同源策略限制，引起的安全问题，称为跨域。 域名：
主域名不同 www.baidu.com/index.html –>www.sina.com/test.js
子域名不同 www.666.baidu.com/index.html –>www.555.baidu.com/test.js
域名和IP地址 www.baidu.com/index.html –>http://180.149.132.47/test.js
端口： www.baidu.com:8080/index.html–… www.baidu.com:8081/test.js
协议： www.baidu.com:8080/index.html–… www.baidu.com:8080/test.js
备注： 1、localhost和127.0.0.1虽然都指向本机，但也属于跨域
跨域错误
解决跨域问题
- jsonp(不使用ajax技术)
首先，不知道大家有没有注意，不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制， 比如我们有可能使用一个网络上的图片，就可以请求得到，<img src="ss3.baidu.com/aa.jpg>
jsonp就是使用同源策略这一“漏洞”，实现的跨域请求
其基本原理是利用HTML的
该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
jsonp弊端 : JSONP仅仅用于get请求
代码实现
服务端 jsonp封装；将响应数据封装到名为callback的函数中返回
router.get('/test', (request,response) => { response.write( “callback( {code:1,data:{content:'内容'}} )”); }
2. 授权跨域资源共享
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource ）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用sharing的限制。
- 代理服务器
回调函数
一个函数作为另一个函数参数，在另一个函数中调用执行，这个函数称为回调函数
回调函数作用:
将函数中的数据作为参数传给回调函数处理
回调函数作用:
1. 将函数中的数据作为参数传给回调函数处理
2. 处理异步任务的结果
同步与异步
<!--
现实生活
异步与同步任务
准备茶水
第一步， 烧开水 5分钟
第二步， 买茶叶 2分钟
第三步, 泡茶 1分
同步操作： 一个任务完成后再处理下一个任务
异步操作: 多个任务同时进行
软件世界
等待一个任务执行完成后，再执行下一个执行，同步任务
一个任务开始后，不等主程序执行完，继续向下执行，这个任务称为异步任务
异步任务
定时器
ajax网络任务
-->
同步
在开始一个任务后，等待主程序结束，再开始下一个任务
异步
在开始一个任务后，不等待主程序结束，继续下一个任务
jsonp封装
<script>
class MyJsonp {
constructor(url) {
this.scriptEle = document.createElement('script') // <script>
this.scriptEle.setAttribute('src', url)
document.body.appendChild(this.scriptEle)
}
getResult(cb){
// callback函数名与后端约定
window.callback = function(result){
// console.log('data >> ',data)
cb(result)
}
}
}
const myJsonp = new MyJsonp('http://10.7.162.150:8089/api/jsonp/list')
myJsonp.getResult(function(data){
console.log('data>>11',data)
})
</script>
ajax封装
/**
let options = {
method: 'get',
url: '',
data:{
username:'jack'
age:18
},
success:function(data){
}
}
*/
function ajax(options) {
// 1. 创建XMLHttpRequest
let xhr = new XMLHttpRequest()
let param = formateParam(options.data) // name=jack&age=18
let method = options.method.toUpperCase()
// 2. 建立连接
if (method == 'GET') {
xhr.open(options.method, options.url + '?' + param)
// 3. 发送请求
xhr.send()
}else if(method == 'POST'){
xhr.open(options.method,options.url)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(param)
}
// 4. 接收响应数据
xhr.onreadystatechange = function () {
// 4.1 是否响应完成
if (xhr.readyState === 4) {
// 4.2 是否成功响应
if (xhr.status === 200) {
let data = xhr.responseText // 响应内容
data = JSON.parse(data)
options.success(data)
} else {
alert('网络出错 ' + xhr.status)
}
}
}
}
/**
* 格式化参数
* {name:'jack',age:18} => name=jack&age=18
* 遍历对象，属性转换成名称=值形式，存储到数组, 再将数组元素用&符号拼接join('&)
* ['name=jack','age=18'] ->
*/
function formateParam(obj) {
let arr = []
for (const key in obj) {
let item = `${key}=${obj[key]}` // name=jack age=18
arr.push(item) // ['name=jack','age=18;]
}
return arr.join('&') // name=jack&age=18
}
// let str = formateParam({name:'jack',age:18})
// console.log(str)
