解决跨域是在开发中经常会遇到的问题,一共有九种解决的方案。在这里先给大家介绍其中的两种:CORS和JSONP,后续的博客也会陆续介绍其他的方案。
CORS
这是一种简单的方案,不用修改任何脚本代码,只需要设置header即可。
//TODO 设置跨域访问 app.use(function (req, res, next) { //设置跨域访问 res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500'); res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); if (req.method === 'OPTIONS') { res.send(200); /*让options请求快速返回*/ } else { next(); } });
第一行的“ * ”,表示任意IP都可以访问,这里也可以写明指定IP 访问。但是这样是不允许携带cookie,需要对前端进行设置。
前端设置如下
let xhr = new XMLHttpRequest(); xhr.open("post", "http://127.0.0.1:3000/users"); xhr.withCredentials = true; xhr.send(null);
此时后端也需要进行相应的调整:
//TODO 设置跨域访问 app.use(function (req, res, next) { //设置跨域访问 res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500'); //TODO 允许携带cookie res.header('Access-Control-Allow-Credentials',true); res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); if (req.method === 'OPTIONS') { res.send(200); /*让options请求快速返回*/ } else { next(); } });
这样即可实现CORS跨域访问。
JSONP
这是利用了一些h5标签对跨域访问不做限制的漏洞。步骤主要有6步:
- 定义一个回调函数。
- 用DOM方法动态创建一个<script>元素
- 指定要请求的URL,并且将回调函数的名称作为一个参数传递
- 将<script>元素插入到当前的文档中,请求开始
- 服务器接受传递过来的参数,然后将回调函数和数据以调用的形式输出
- 当<script>元素接受到响应中的脚本代码后,就会自动执行它
前端设置:
//定义回调函数 let handle=(x)=> { console.log(x); }; //创建script元素并设置src let script = document.createElement("script"); script.src = "users?jsonp=handle"; //传递回调函数的名称 //添加到文档中,请求开始 document.body.appendChild(script);
后端代码:
let jsonp = req.query.jsonp; let arr={ 'text':'dmt' }; let str=jsonp.toString() +'('+JSON.stringify(arr)+')'; res.send(str);
以上就是两种简单的跨域情况的处理了。