手写简易的ajax请求
function ajax (type,url,data = null) {
const xhr = new XMLHttpRequest()
xhr.open(type, url, false)
if(type === 'get') {
xhr.send()
}else if(type === 'post') {
xhr.send(JSON.stringify(data))
}
xhr.onload = function() {
if(xhr.status == 200) {
console.log('请求成功')
}else {
console.log('请求失败')
}
}
}
ajax('post', '/addUser', {
name: 'Curry',
age: 27
})
ajax('get', '/UserList?id=2')
看大家如何理解简易,这是我的简易版
解决跨域方法
封装jsonp
function jsonp(url, data, callbackName) {
//创建script标签
let script = document.createElement('script');
//生成随机函数名
let fnName = 'jsonp' + Math.random().toString().replace('.', '') + new Date().getTime();
// 为全局作用域下添加一个属性 属性名就是随机生成的函数名
//让属性的值指向调用jsonp函数时传递进来的success函数
window[fnName] = options.success;
let params = '';
for(prop in options.data) {
params += '&' + prop + '=' + options.data[prop]
}
//为script标签设置src属性
script.src = options.url + '?callback' + fnName + params;
//将html标签追加到页面中
document.body.appendChild(script);
//当script标签加载完成之后
script.onload = function () {
//将script标签从页面中删除
document.body.removeChild(this);
}
}
缺点:jsonp不支持post请求
跨域资源共享(CORS),只需服务端设置,前端不用做任何配置
node为例
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST');
//允许客户端发送请求时携带cookie
res.header('Access-Control-Allow-Credential', 'true')
next();
})
注意:涉及跨域请求时,浏览器默认不会携带cookie信息,需要设置
原生ajax时:xhr.withCredentials = true
代理
nginx代理
location /api/ {
#允许跨域的域名
add_header Access-Control-Allow-Origin www.aly01.com;
#允许跨域请求的方法
add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE;
#允许客户端发送请求时携带cookie
add_header Access-Control-Allow-Credentials: true;
#反向代理
proxy_pass http://www.aly02.com:8080/;
#修改cookie里域名
proxy_cookie_domain www.domain2.com www.aly01.com;
}
注意如果要替换掉api,proxy_pass 地址后面需要加/如果不加请求的地址后面会带上api
还可以通过node做代理后面会加上,如大家急需了解,可以在评论区说,我尽快更新…