- 什么是跨域?
- 跨域请求的方式?
js跨域:指的是在不同域之间进行数据交换与通信,js中默认只有在同源的情况下才能进行数据的传输。
同源:相同域名,端口,协议。
http://www.aaa.com
http://www.aaa.com/bbb //同源
jsonp
第一种解决跨域的方法:jsonp(json with padding)顾名思义就是数据填充。至于怎么填充,那就和html几个标签有关系了,script,link,img,iframe等,他们用到的原理都一样,都是由于这些标签不存在跨域请求限制。
//再引入jquery的时候,这时我们就会用到跨域请求 当前我们访问的是非同源的服务器
//此时映入jquery的cdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//此时我们访问的本地的路径,在同源环境下请求数据
<script src="./jsonp.js"></script>
通过src属性向服务器发送请求,在请求的url中传递一个函数类型的参数,如http://localhost:3000/callback=fn 服务器在接收到请求后 准备处理请求并把数据以函数调用的方式传递给客户端,如
//服务器端返回的数据
data:{
name:'zhangsan',
age:12
}
//注意这里传递的是json字符串 在客户端必须准备好一个fn函数的声明 用来接收传递过来的数据
//并且函数声明应该在引入之前,必须是全局函数
"fn(" +JSON.stringfiy(data)+")"
总结:jsonp是基于script不受同源策略的影响,可以向任何服务器地址发送请求,并且传递一个callback作为参数,服务器返回函数调用,并把数据以参数的形式传递给客户端。但是同时jsonp只能处理get请求,因为所有的参数都是通过url传递的
cros跨域资源共享
cros主要是对于服务器就行设置,以node后端为主
var express = require('express');
var app = express();
var allowCrossDomain = function (req, res, next) {
//设置允许请求的源
res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
//设置请求方式
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
//设置请求头信息
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
app.use(allowCrossDomain);
总结:cros的优点在于发送请求的方式不受限,相对与jsonp更加简单,只用后端做出相应的设置,缺点在于浏览器在发送真正的请求之前,会先发送一个 Preflight 请求给服务器,这种请求使用 OPTIONS方法,发送下列头部:
Origin: http://www.abc.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: token