跨域问题总结

为什么会有跨域这个问题？

原因是浏览器为了安全，而采用的同源策略（Same origin policy）

什么是同源策略？

1. 同源策略是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
2. Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
3. 所谓同源是指：协议、域名、端口必须要完全相同。即：协议、域名、端口都相同，才能算是在同一个域里面

非同源受到哪些限制？

1. cookie 不能读取
2. DOM 无法获得
3. Ajax 请求不能发送

如何在开发中解决跨域问题

jsonp 解决跨域发送请求跨域问题

要明确的是：jsonp 不是一种技术，而是程序员“智慧的结晶”（利用了标签请求资源不受同源策略限制的特点）
jsonp 需要前后端人员互相配合

jsonp 是什么？

jsonp（JSON with Padding），是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

jsonp 怎么工作的？

1. 网页中有一些标签天生具有跨域的能力，比如：img、link、iframe、script。
2. jsonp 就是利用 script 标签的跨域能力来发送请求的。

jsonp 的使用

创建 script 节点，指定 src，利用标签把请求发出去
定义好一个处理数据的函数
把数据处理函数的名称传递个后端
后端返回符合 js 函数调用语法的字符串

1. 动态的创建一个 script 标签

var script = document.createElement('script')

2. 添加请求路径和请求参数

script.src = 'url?callback=getData'

3. 定义一个全局函数

window.getData = function(data) {
  console.log(data)
}

4. 把标签放入页面

document.body.appendChild(script)

5.后端配合

// 后端获取到参数，查询数据库，获得所需数据
// 给请求发送响应，因为script会对请求到的数据，进行js运行，所以如果返回回来的数据中有js代码的话，会执行js代码
response.send(`${callback}(`${JSON.stringify(data)}`)`)

局限性

1. 只能解决 GET 请求跨域问题
2. 必须需要后端人员配合

cors 解决跨域

node 后端设置

response.header('Access-Control-Allow-Origin', 'http://localhost:8080')
response.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
response.header('Access-Control-Allow-Headers', 'Content-Type')