node-09-跨域

八-跨域

1.什么是同源

所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

2.同源策略

浏览器发送ajax请求,如果不同源就不让你访问
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

3.什么是跨域

当浏览器出现这个报错的时候,说明出现了跨域问题

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

4.非同源限制

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

无法接触非同源网页的 DOM

无法向非同源地址发送 AJAX 请求

但是有三个标签是允许跨域加载资源：

1.<img src=XXX> 
2.<link href=XXX> 
3.<script src=XXX>

5.解决办法

1.cors

全称

跨域资源分享（Cross-Origin Resource Sharing）

原理

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

对比

自己实现

创建一个中间件,在响应头中设置’Access-Control-Allow-Origin’, ‘*’

*，表示接受任意域名的请求。

app.use((req, res, next) => {
  console.log('执行啦 ！！！')
  res.setHeader('Access-Control-Allow-Origin', '*')
  next()
})

注意点

所有浏览器都支持该功能，IE浏览器不能低于IE10。

资料

跨域资源共享 CORS 详解 http://www.ruanyifeng.com/blog/2016/04/cors.html

2.JSONP

基本思想

网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

优点

兼容性好

缺点

操作起来复杂

只支持get请求

代码实现

1.先动态插入script标签,想跨源网址发送请求

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

2.服务器收到请求后,将数据放在回调函数的实参位置返回

//注册路由
app.get("/sb", (req, res) => {
    let obj = {
        name:'战三',
        age:18,
        gender:"男"
    };
   let objJson = JSON.stringify(obj); //把js对象转成json字符串

   let fn1 = req.query.callback; //此时fn就是前端通过url传值过来testsb.

  res.send(`${fn1}(${objJson})`);
});

面试坑
jQ的JSONP和ajax有没有关系？

1. 没有任何关系
2. 利用的是script标签的src属性
3. 只是因为用法和ajax很像，比较喜欢问问