跨域解决(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方法动态创建一个

你可能感兴趣的:(js,前端,nodejs)