跨域与解决
目录
[TOC]
1、什么是跨越?
- 一个网页向另一个不同域名/不同协议/不同端口的网页请求资源,这就是跨域。
- 跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名。
2、为什么会产生跨域请求?
- 因为浏览器使用了同源策略
3、什么是同源策略?
- 同源策略是Netscape提出的一个著名的安全策略,现在所有支持JavaScript的浏览器都会使用这个策略。同源策略是浏览器最核心也最基本的安全功能,如果缺少同源策略,浏览器的正常功能可能受到影响。可以说web是构建在同源策略的基础之上的,浏览器只是针对同源策略的一种实现。
- 同源: 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域
。4、为什么浏览器要使用同源策略?
- 是为了保证用户的信息安全,防止恶意网站窃取数据,如果网页之间不满足同源要求,将不能:
- 1、共享Cookie、LocalStorage、IndexDB
- 2、获取DOM
- 3、AJAX请求不能发送
5、跨域的五个解决方式:
1、前端使用jsonp (不推荐使用)
2、后台Http请求转发
3、后台配置同源Cors (推荐)
4、使用SpringCloud网关
5、使用nginx做转发 (推荐)
本课程提到了其中的两种:
1、jsonP
1)JSONP 是什么?
JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明 才智开发出来,只支持 get 请求。
2)JSONP 怎么工作的?
在网页有一些标签天生具有跨域能力,比如:img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。
Ⅰ-jsonP的使用
// 1. 动态的创建一个 script 标签------------------------------------------------------------
var script = document.createElement("script");
//2. 设置 script 的 src, 设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
// 3. 将 script 添加到 body 中
document.body.appendChild(script);
// 4. 服务器中路由的处理------------------------------------------------------
router.get("/testAJAX", function (req, res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {
ame: "孙悟空",
age: 18
}
res.send(callback + "(" + JSON.stringify(obj) + ")");
});
Ⅱ-jQuery发送jsonP请求
//前端代码-----------------------------------------------------------------------------------
$('button').eq(0).click(function () {
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
$('#result').html(`
名称: ${data.name}<br>
校区: ${data.city}
`)
});
});
//服务端代码-----------------------------------------------------------
app.all('/jquery-jsonp-server', (request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name: '尚硅谷',
city: ['北京', '上海', '深圳']
};
//将数据转化为字符串
let str = JSON.stringify(data);
//接收 callback 参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
Ⅲ-我自己开发封装的jsonP插件
1、代价:需要前后端联动 2、精髓:自动的由插件生成方法名,并在当前的页面动态的生成函数,然后再生成的函数里头调用用户预留的回调函数 3、插件:自动化的去模拟基于script去实现跨域请求的过程(对用户来说是黑盒子) 4、参数拼接:url已经是带参的。和不带参的 5、id优化 额可以添加一个容器来管理id
1、前端调用测试封装好的jsonP代码
//测试调用函数
let test=function () {
jsonP.req({
url:"http://localhost:3000/jsonpx",
data:{
a:"111"
},
callback:function (result) {
alert("成功"+result)
}
})
}
2、服务端测试代码
router.get('/jsonpx', async function (req, resp, next) {
let callback=req.query.callback;
let data=req.query.a;
if (!data){
resp.send(`${callback}('洪jl:我是服务端代码')`)
}
resp.send(`${callback}('洪jl:我是服务端代码`+data+`')`)
})
3、封装原生代码
<script>
/**author:@hongjilin
* 1.声明一个jsonP插件对象
* 作用:隔开作用域
*/
let jsonP = {};
/**
*2.在插件对象中创建两个名字备用符数组
*/
jsonP.char = {
Number: '0123456789',
Letter: 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
}
/**
* 通过随机数抽取备用字符数组库拼凑函数id
* @param charLen
* @param numLen
*/
jsonP.newFunId = function (charLen, numLen) {
let id = '';
for (let i = 0; i < charLen; i++) {
id += this.char.Letter.charAt(Math.random() * 52)
}
for (let j = 0; j < numLen; j++) {
id += Math.floor(Math.random() * 10);
}
return id;
}
/**
* 拼接路径
* @param url
* @param key
* @param value
*/
jsonP.jointUrl = function (url, key, value) {
if (url && key && value) {
let sign = "&"
//如果是第一次
if (url.indexOf('?') == -1) {
sign = '?'
}
url += sign + key + "=" + value
}
return url;
}
/**
封装err属性方便
*/
jsonP.err = function (msg) {
console.error(msg)
}
/**
* 发送请求函数
* @param options
*/
jsonP.req = function (options) {
let jsonId={};
//1.生成方法名
jsonId.funId = this.newFunId(4,8);
let Userurl = options.url;
let Userdata = options.data;
if (!options) {
this.err("输入不能空")
return;
} else if (!Userurl) {
this.err("url不能空")
return;
} else if (!Userdata) {
//如果没有data,初始化
Userdata = {};
}
//将函数名赋值给userdata的回调函数属性中
Userdata.callback = jsonId.funId;
for (let key in Userdata) {
Userurl = this.jointUrl(Userurl, key, Userdata[key])
}
let script = document.createElement('script');
script.setAttribute("id" , jsonId.funId);
script.setAttribute("src" , Userurl);
//动态生成函数
let callback=function (result) {
console.log("xxxxxxx")
//业务逻辑回调
if (options.callback){
try {
options.callback(result)
}catch (e) {
this.err(e.message)
}
}
//善后
let tmp=document.getElementById(jsonId.funId)
tmp.parentNode.removeChild(tmp);
eval(jsonId.funId+'=null')
}
eval("window."+jsonId.funId+"=function(result){ callback(result) }")
document.head.appendChild(script)
}
</script>
2、CORS
1、CORS文档链接
2、CORS是什么?
CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些 源站通过浏览器有权限访问哪些资源
3、CORS是怎么工作的?
CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应 以后就会对响应放行。
Ⅰ-代码示例
app.all('/cors-server', (request, response) => {
//设置响应头
//响应首部中可以携带一个 Access-Control-Allow-Origin 字段
response.setHeader("Access-Control-Allow-Origin", "*");
//Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字
response.setHeader("Access-Control-Allow-Headers", '*');
//Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP
response.setHeader("Access-Control-Allow-Method", '*');
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
response.send('hello CORS');
});
Ⅱ-HTTP 响应首部字段
本节列出了规范所定义的响应首部字段。上一小节中,我们已经看到了这些首部字段在实际场景中是如何工作的。
1、Access-Control-Allow-Origin
响应首部中可以携带一个
Access-Control-Allow-Origin
字段,其语法如下:Access-Control-Allow-Origin: <origin> | *
其中,origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求,服务器可以指定该字段的值为通配符,表示允许来自所有域的请求。
例如,下面的字段值将允许来自 http://mozilla.com 的请求:
Access-Control-Allow-Origin: http://mozilla.com
如果服务端指定了具体的域名而非"*",那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端:服务器对不同的源站返回不同的内容。
2、Access-Control-Expose-Headers
译者注:在跨源访问时,XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头,Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma,如果要访问其他头,则需要服务器设置本响应头。
Access-Control-Expose-Headers
头让服务器把允许浏览器访问的头放入白名单,例如:Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
这样浏览器就能够通过getResponseHeader访问
X-My-Custom-Header
和X-Another-Custom-Header
响应头了。
3、Access-Control-Max-Age
Access-Control-Max-Age
头指定了preflight请求的结果能够被缓存多久,请参考本文在前面提到的preflight例子。Access-Control-Max-Age: <delta-seconds>
delta-seconds
参数表示preflight请求的结果在多少秒内有效。
4、Access-Control-Allow-Credentials
Access-Control-Allow-Credentials
头指定了当浏览器的credentials
设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时,它指定了实际的请求是否可以使用credentials
。请注意:简单 GET 请求不会被预检;如果对此类请求的响应中不包含该字段,这个响应将被忽略掉,并且浏览器也不会将相应内容返回给网页。Access-Control-Allow-Credentials: true
5、Access-Control-Allow-Methods
Access-Control-Allow-Methods
首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。Access-Control-Allow-Methods: <method>[, <method>]*
6、Access-Control-Allow-Headers
Access-Control-Allow-Headers
首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。Access-Control-Allow-Headers: <field-name>[, <field-name>]*
Ⅲ-HTTP 请求首部字段
本节列出了可用于发起跨源请求的首部字段。请注意,这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨源请求时,它们已经被设置就绪。
1、Origin
Origin
首部字段表明预检请求或实际请求的源站。Origin: <origin>
origin 参数的值为源站 URI。它不包含任何路径信息,只是服务器名称。
Note: 有时候将该字段的值设置为空字符串是有用的,例如,当源站是一个 data URL 时。
注意,在所有访问控制请求(Access control request)中,
Origin
首部字段总是被发送
2、Access-Control-Request-Method
Access-Control-Request-Method
首部字段用于预检请求。其作用是,将实际请求所使用的 HTTP 方法告诉服务器。Access-Control-Request-Method: <method>
3、Access-Control-Request-Headers
Access-Control-Request-Headers
首部字段用于预检请求。其作用是,将实际请求所携带的首部字段告诉服务器。Access-Control-Request-Headers: <field-name>[, <field-name>]*