🎈 原创

同源政策

Ajax只能向自己的服务器发送请求。A网站中的HTML文件只能向A网站服务器中发送Ajax请求，A网站是不能向B网站发送Ajax请求的。

使用JSONP解决同源限制问题

jasonp = json with padding
不属于ajax请求，但是可以模拟Ajax请求。

利用script标签发送请求
解决的是get请求，传递参数需要拼接url

封装

客户端(浏览器端)

function jsonp(options) {
    // 动态创建script标签
    var script = document.createElement('script');
    // 拼接字符串的变量
    var params = '';
    for(var attr in options.data) {
        params += '&' + attr + '=' options.data[attr];
    }
    var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
    // 将它变成全局函数
    window[fnName] = options.success;
    // 为script标签添加src属性
    script.src = options.url + '?callback=' + fnName + params;
    // 将script标签追加到页面中
    document.body.appendChild(script);
    // 为script标签添加onload事件
    script.onload = function() {
        document.body.removeChild(script);
    }
}

服务器端

服务器端使用了Node.js 并且使用了Node的Express框架

app.get('/better', (req, res) => {
    // // 接收客户端传递过来的函数的名称
    // const fnName = req.query.callback;
    // // 将函数名称对应的函数调用代码返回给客户端
    // const data = JSON.stringify({name: 'zhangsan'})
    // const result = fnName + '(' + data + ')'
    // setTimeout(() => {
    //     res.send(result);
    // }, 1000);

    res.jsonp({name: 'zhangsan', age: 20});
})

另一种解决方法

由于同源限制只存在在浏览器中，服务器中不存在，所以跨源请求可以由服务器代发。

客户端先向自己的服务器A发送请求， 然后再由服务器A向服务器B发送请求，最后再传回响应。

需要安装模块requestnpm install request

const request = require('request');

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, 'public')));

app.get('/server', (req, res) => {
    request('http://localhost:3001/cross', (err, response, body) => {
        console.log(err);
        console.log(response);
        console.log(body);
        res.send(body);
    });
});

app.listen(3000);

cookie

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

客户端和服务器端都需要做相应的设置，两者缺一不可。

withCredentials: 指定在涉及跨域请求时，是否携带cookie信息，默认为false
Access-Control-Allow-Credentials: true 允许客户端发送请求时携带cookie

example：

客户端: xhr.withCredentials = true
服务端:

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Methods', 'get,post');
    // 允许客户端发送跨域请求时携带cookie信息
    res.header('Access-Control-Allow-Credentials', true);
    next();
})