什么是跨域?
指的是浏览器不能执行其他网站的脚本,简单来说是浏览器同源政策的限制,浏览器针对于ajax的限制。
同源政策
两个页面拥有相同的协议,端口,域名 就是同源,如果有一个不相同就是不同源。
同源政策产生的目的
保护用户信息安全,防止一些网站盗取用户信息。
解决跨域的方案一
1.jsonp (json with padding)
json with padding 将json 数据作为填充,简单来说就是服务器将json作为函数的参数。
原理:
1.动态创建一个script标签
2.通过srcipt标签里的src属性 进行 跨域访问 属性里面写 跨域的地址+ callback属性作为函数传递给后端
3.服务端通过接收客户端传过来的callback属性值对应的函数名
4.要发生过去的数据 通过函数的参数传递过去 (JSON格式)
5.将函数名对应调用的执行代码返回给客户端(服务器端响应数据一定是函数代码的调用,当浏览器对script将响应内容加载完成后,会自动调用函数)
6.并且在服务器端的执行函数是字符串,字符串包裹着函数调用的代码,如果没有包裹,则就在服务端立即执行。
缺点:只能发送get请求
客户端代码
// 1.封装一个jsonp函数;
jsonp({
// method: 'GET',// 所有的jsonp请求都是get请求,所以这个属性可以不写了
// data: , // 写了以后太繁琐,取消
url: 'http://www.localhost:3006/api/jsonp',
success: function (res) {
console.log(res)
}
})
// 封装
function jsonp(obj) {
// 1.创建一个script标签; 2.改变src 3.给函数起名字,定义为全局函数;
var script = document.createElement("script"); // 不要用innerHTML, 他不会自动发送请求
// 3.给函数起名字,定义为全局函数;
var fnName = "haha_123123";
// window.aaa就是把aaa设置为全局变量!
window[fnName] = obj.success;
// 2.改变src,添加到head中
script.src = obj.url + "?callback=" + fnName;
// 把script标签添加到head标签中,就会发送src的请求了
document.head.appendChild(script);
// 代码执行完毕,把script标签删除
script.onload = function () {
document.head.removeChild(script);
window[fnName] = undefined;
}
}
服务端代码
app.get("/api/jsonp", (req, res) => {
// 获取函数名,设置对象,发送给客户端
const fnName = req.query.callback;
// 定义发送给客户端的对象转换为json字符串
var objStr = JSON.stringify({
name: '张三',
age: 18
});
// 字符串类型的执行函数
res.send(`${fnName}(${objStr})`);
});
2.CORS (CROSS-Origin Resource Sharing 跨域资源共享)
原理:服务器设置
同源政策默认阻止跨域获取资源,但是CORS给了web服务器权限,即服务器可以选择,允许访问他们的资源
设置三个响应头
1.Access-Control-Allow-Origin 字段 (指定了哪些域名或ip地址可以跨域 也可以写* 代表允许所有地址)
res.setHeater('Access-Control-Allow-Origin',' http://XXX.cn || * || ip地址 ');
2.CORS默认支持9个请求头,如果在9个请求头之外 要单独设置,多个请求头之间要用英文逗号隔开。
res.setHeater('Access-Control-Allow-Headers','Content-Type,X-Custom-Header');
3.默认情况下CORS仅支持客户端发起的GET、POST、HEAD请求,如果希望客户端发送PUT、DELETE请求需要在服务器端设置
res.setHeater('Access-Control-Allow-Method','GET');
补充
根据头信息和请求方式,浏览器进行了优化,对请求进行划分,分为简单请求和非简单请求
简单请求和非简单请求不做概述
简单请求 : 满足浏览器请求会直接发送 并在请求头中携带Origin 表示本次来自哪个源
如果不满足简单请求 , 会在发送请求之前发送一个预检请求 大小为0kb 请求方式为options 收到服务器响应后,分析它是否支持跨域,如果支持跨域则直接发送,如果不支持 报错!
3. webpack代理、
通过服务器代理去发ajax 这个代理是webpack提供给我们的 因为服务器只是对ajax的同源限制,并不会限制服务器之间的通信
//vue.config.js
devServer: {
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
// http://localhost:8080/api/login -> http://localhost:3000/api/login
'/api': {
target: 'http://localhost:3000' // 我们要代理的真实接口地址
}
}
},