开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
同源政策
如果两个页面有相同的协议,域名和端口,那么这两个页面就属于同一个源
目的: 为了保证用户信息的安全,防止恶意的网站
在非同源地址发送ajax请求,如果请求,就会报错
使用jsonp解决同源限制问题
1.将不同源的服务器端的请求地址写在script标签的src熟悉性中
2.服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数
const data = 'fn({name: "张三", age: "10"})';
res.send(data);
3.在客户端全局作用域下定义函数fn, 内部对服务器返回的数据进行处理
function fn (data) {
console.log(data);
}
jsonp代码优化
前端
//创建script标签
var script = document.createElement('body');
//设置src属性
script.src = 'https://localhost:3000/better?callback=fn';
//将script标签追加到页面中
doucment.body.appendChild(script);
//为scrript标签添加onload事件
script.onload = function () {
//将body中的script标签删除掉
document.body.removeChild(script)
}
后端
//接受客户端传递过来的函数的名称
const fnName = req.query.callback;
//将函数名称对应的函数调用代码返回给客户端
const result = fnName + '({name: "张三"})'
res.send(result)
176.封装jsonp
function jsonp (options) {
//动态创建script标签
var script = document.createElement('script);
//拼接字符串的变量
var params = '';
for(var attr in options.data) {
params += '&' + attr + '=' + options.data[attr];
}
va fnName ='myJsonp' + Math.random().toString().replace('.','')
//它不是一个全局函数,我们把它变成全局函数
window[fnName ]= options.success
//为script标签添加src属性
script.src = options.ur + '?callback=' + fnName + params ;
//将script标签追加到页面中
document.body.appendChild(script)
//为script标签添加onload事件
script.onload = function () {
document.body.removeChild(script)
}
}
json({
//请求地址
url: 'http: //localhost:3000/better',
data: {
name: 'lisi',
age: 30
}
success: function(data) {
console.log(data)
}
})
res.jsonp({name: 'lisi', age: 20})
cors跨域资源共享
cors 跨域资源共享,允许浏览器向跨域服务器发送Ajax请求,克服了Ajax只能同源使用的限制
Access-Control-Allow-Orign: 'http://localhost:3000'
Access-Control-Allow-origin: '*'
.serialize方法
作用: 将表单中的数据自动拼接成字符串类型的参数
var params = $('#form').serialize();
//name=zhangsan&age=30
