跨域解决方案

1.JSONP

动态创建Script，请求一个带参网址实现跨域通信

<script>

    var script = document.createElement('script');

    script.type = 'text/javascript';

    // 传参并指定回调执行函数为onBack

    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';  //callback=onBack用来指定回调函数

    document.head.appendChild(script);

    // 回调执行函数

    function onBack(res) {

        alert(JSON.stringify(res));

    }

服务端返回 onBack({"status": true, "user": "admin"})

这样就实现了一个jsonp跨域

2.CORS跨域

普通的跨域请求只需服务端设置Access-Control-Allow-Origin即可，前端无须设置；

带cookie请求：前后端都需要设置字段，另外需注意：所带cookie为跨域请求接口所在域的cookie，而非当前页。

示例代码：

var xhr = new XMLHttpRequest();

// 前端设置是否带cookie

xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('user=admin');

xhr.onreadystatechange = function() {

    if (xhr.readyState == 4 && xhr.status == 200) {

        alert(xhr.responseText);

    }

};

 

 

Nodejs服务端：

var http = require('http');

var server = http.createServer();

var qs = require('querystring');

server.on('request', function(req, res) {

    var postData = '';

    // 数据块接收中

    req.addListener('data', function(chunk) {

        postData += chunk;

    });

    // 数据接收完毕

    req.addListener('end', function() {

        postData = qs.parse(postData);

        // 跨域后台设置

        res.writeHead(200, {

            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie

            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）

            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取cookie

        });

        res.write(JSON.stringify(postData));

        res.end();

    });

});

server.listen('8080');

console.log('Server is running at port 8080...');