Ajax跨域问题

跨域问题

产生跨域的原因

浏览器从一个域名的网页去请求另一个域名的资源时,域名,端口,协议任何一个不同,都会产生跨域

产生跨域三个因素: 域名 端口 协议

1.jsonp解决跨域

Jsonp:
应用json的一种新方法,脚本代码
只能解决get请求的跨域问题

//后端配置jsonp接口
app.get('/jsonpdata', function(req, res) {
    //获取AJAX传来的jsonpCallBack回调函数
    var query = req.query;
    var callback = query.callback;
    //判断是否链接成功
    if (query.status == 200 && query.count == 1) {
        var msg = "success";
        res.send("" + callback + "('" + msg + "')");
    }
});

//前端AJAX调用后端数据
var jsonpsrc = 'http://127.0.0.1/jsonpdata';
        $.ajax({
            method: 'get',
            url: jsonpsrc,
            data: {status: 200, count: 1},
            dataType: 'jsonp',
            jsonpCallBack: 'getdata',
            success: function (res) {
                console.log(res);
            },
            error: function (err) {
                console.log(err);
            },
            async: true
        });

2.cros解决跨域问题

通过对后端接口的配置来解决跨域问题

app.use(function(req,res,next){
    //配置cros跨域
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    //next函数的作用是什么?
    next();
    //将执行权传给第二个中间插件
})

3.通过第三方模块解决

#安装第三方模块cors
npm install cors

//引入模块
var cors =  reuqire('cors')
//配置模块
app.use(cors())