跨域解决（CORS和JSONP)

解决跨域是在开发中经常会遇到的问题，一共有九种解决的方案。在这里先给大家介绍其中的两种：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步：

1. 定义一个回调函数。
2. 用DOM方法动态创建一个<script>元素
3. 指定要请求的URL，并且将回调函数的名称作为一个参数传递
4. 将<script>元素插入到当前的文档中，请求开始
5. 服务器接受传递过来的参数，然后将回调函数和数据以调用的形式输出
6. 当<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);

 

 以上就是两种简单的跨域情况的处理了。