同源政策及解决方案

---

---

 封装JSONP函数(解决同源限制)：

 function jsonp(options) {
        // 动态创建script标签
        let script = document.createElement('script');
        let params = '';
        for (let attr in options.data) {
            params += '&' + attr + '=' + options.data[attr]
        }
        let 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);
        }
    }

JSONP函数调用：

jsonp({
        url: 'http://localhost:3000/better',
        data: {
            name: 'lisi',
            age: 30
        },
        success: function (data) {
            console.log(data)
        }
    })

---

node.js解决跨域代码（一）：

直接对所请求的服务器设置是否允许其他客户端访问

app.use((req,res,next)=>{
    // 1.允许哪些客户端访问
    // * 代表允许所有的客户端访问
    res.header('Access-Control-Allow-Origin', '*');
    // 2.允许客户端使用哪些请求方法访问
    res.header('Access-Control-Allow-Methods', 'get,post')
});

node.js解决跨域代码（二）：

浏览器先访问自家的服务器，再由自家的服务器对别人家的服务器进行请求，最后将请求结果返回给自家服务器，从而绕过浏览器的同源限制。

const request = require('request');  //导入request模块

app.get('/server', (req, res) => {
    request('http:localhost:3001/cross', (err, response, body) => {
        console.log(err);  //请求有误报错
        console.log(response);  //服务器的响应信息
        console.log(body)  //二号服务器返回的值
    })
});