跨域

1.跨域

1）同源政策

• 协议相同（http https）

• 域名相同

• 端口相同（http默认80端口，https默认443端口）

如果非同源，共有三种行为受到限制。

• Cookie无法读取。

• DOM 无法获得。

• ==AJAX 请求无效==（可以发送，但浏览器会拒绝接受响应）。

在发送Ajax请求的时候，请求的地址只要违反了同源政策，那么就属于跨域请求。

1.1实现跨域请求的方案--JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。

其原理就是在客户端借助 script 标签请求服务端的一个地址，服务端的这个地址返回一段带有调用某个全局函数调用的 JavaScript 脚本（而非一段 HTML），将原本需要返回给客户端的数据通过参数传递给这个函数，函数中就可以得到原本服务端想要返回的数据。

1.2使用JSONP实现跨域请求

1.3可以利用参数callback，实例函数名的传递

2.1jQuery封装的ajax方法跨域请求

  $.ajax({
          type: 'GET',
          // 为了兼容各个版本的jQuery，最好在url上加入如下所示的callback
          // url: 'http://127.0.0.1:4000/getStu2?callback=?',
          url: 'http://127.0.0.1:4000/getStu2',
          success: function (res) {
              console.log(res);
          },
          dataType: 'jsonp' // 必须指定预期服务器返回数据的类型为jsonp
      });

要访问接口
 app.get('/getStu2', (req, res) => {
      let data = [
          {id: 1, name: '张三疯', age: 30},
          {id: 2, name: '张三疯', age: 30},
          {id: 3, name: '张三疯', age: 30}
      ];
      data = JSON.stringify(data);
      // 获取url中的callback参数
          // 使用url模块
          // 使用express，可以使用req.query来获取参数了
      // console.log(req.query); // { callback: 'abcd' }
      let fn = req.query.callback;
      res.send(fn + '(' + data + ')');
  })

2.2  jQuery实现跨域的方法，除了可以，​.getJSON方法也是可以的。

// 实现跨域的快捷方法
// 使用它的时候，必须加callback=?
$.getJSON('http://127.0.0.1:4000/getStu2?callback=?', function (res) {
    console.log(res);
}, 'jsonp');

3.1实现跨域请求的方案--CORS

通过在==被==请求的接口中设置header头，可以实现跨域。不过这种方式只有最新的浏览器（IE10）才支持。

Cross Origin Resource Share，跨域资源共享

app.get('/getStu3', (req, res) => {
  // // 允许任意源访问，不安全
  // res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定源访问
  res.setHeader('Access-Control-Allow-Origin', 'http://www.xxx.com')
  res.send('hello');
})

这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。