解决跨域请求的三种方式

为什么要解决跨域的问题

由于浏览器的同源政策的影响，A网站下面的客户端能够发送请求给B网站的服务器端，但是由于浏览器的同源政策，浏览器会自动拦截B网站发送回来的响应的信息。

解决跨域的第一种方法

利用 script 标签中的 src 属性去解决

// 该jsonp方法传递的参数是一个对象
function jsonp (options) {
    // 动态创建script标签
    var script = document.createElement('script');
    // 拼接字符串的变量
    var params = '';
    
    for (var attr in options.data) {
        params += '&' + attr + '=' + options.data[attr];
    }
    
    // myJsonp0124741
    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);
    }
}

解决跨域的第二种方法

利用CORS：其实当浏览器检测到客户端的请求是跨域的时候，会在请求头上面添加一个origin字段保存本网站的网址。然后再发送请求给另一个网站。如果另一个网站接受了我们跨域的请求，那么响应头上面也会有一个origin字段。浏览器会自动判断响应头是否有origin字段来判断服务器是否接受我们的跨域的请求。

// 服务器端需要配置，客户端无需修改操作
// 拦截所有的请求
app.use((req, res, next) => {
	// 接受所有网站发送过来的跨域请求
	res.header('Access-Control-Allow-Origin', '*');
	// 接受跨域的请求的方法
	res.header('Access-Control-Allow-Methods', 'get, post');
)

解决跨域的第三种方法

其实是利用服务器端之间的通信，因为服务器端之间的通信并没有同源政策的影响。
原理： 客户端先发送请求给本网站A，A再发送跨域请求给网站B。B响应数据给A，A最后再把数据响应回去给客户端。

// A服务器端如何发送请求给B服务器端
const request = require("request");
request('要请求的网址', (err, response, body) => {
	// 第一个参数是要请求的另一个服务器端地址
    // 第二个参数是回调函数
    // error代表错误对象
    // response代表响应信息对象
    // body代表返回的主体内容数据（响应数据）
})