同源限制

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
http://www.example.com/dir/page.html
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

ajax同源限制

默认情况下浏览器会拒绝接受非同源服务器端返回的信息

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

使用 JSONP 解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

1. 将不同源的服务器端请求地址写在 script 标签的 src 属性中
   
2. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。也可以直接调用express框架封装好的jsonp方法

res.jsonp({
        name: 'lisi',
        age: 50
    })

3. 在客户端全局作用域下定义函数 fn‘
4. 在函数内部定义对于返回的数据的处理

原理：相当于服务器端返回的是对于fn的调用

JSONP 代码优化

客户端需要将函数名称传递到服务器端。
将 script 请求的发送变成动态请求。
封装 jsonp 函数，方便请求发送。
服务器端代码优化之 res.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);
            }
        }
        jsonp({
                // 请求地址
                url: 'http://localhost:3001/better',
                data: {
                    name: 'lisi',
                    age: 30
                },
                success: function(data) {
                    console.log(123)
                    console.log(data)
                }
            })

对于因为函数名称不同次数可能出现相同的问题的解决方案是给函数名加一个随机数，同时要注意的是传入的函数必须是定义在全局变量下的，所以要使用window[]=jsonp.success来将函数变成全局作用域下的

使用ajax方法客服同源限制

CORS 跨域资源共享
CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。
原理：原本的同源限制问题出自浏览器拒绝接收非同源服务器的响应报文

所以可以通过对响应报文添加额外的响应头来使得浏览器接收响应报文

app.use((req, res, next) => {
    // 1.允许哪些客户端访问我 设置响应头
    // * 代表允许所有的客户端访问我
    // 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
        // 2.允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post')
        // 允许客户端发送跨域请求时携带cookie信息
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

另一种解决方案：

使用request模块在a服务器端访问b服务器端 然后将数据响应

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

withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false
Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie 在服务器端的header中设置 代码见cors 常用于登陆问题