跨域问题

同源策略

• 同源：client 与 server 的协议，域名，端口相同
• 如果一个源的脚本（页面js）去执行另外一个源的脚本（js），会首先检查被执行的代码和当前执行代码的源是否是相同的，如果不同，则会拒绝执行
• 不是所有的操作的都会受到同源策略的影响，比如：html中的link，script，img等
• 受到同源策略影响的：ajax、iframe、window.open、cookie、storage

跨域

• 因为ajax有同源策略，所以在通过ajax发送请求的时候会有一定的限制
• 当我们发送的请求是http，那么请求是会被发送出去的，服务器也能接收并处理该请求，同时也能正常返回数据，浏览器也能接收，但是在接收阶段会验证是否同源，如果不同源，拒绝后续处理，如果是https协议，则请求都不会发出去

解决方案

• 利用html5(XMLHttpRequest2.0)当中的新特性，如果是http协议，那么只需要在服务器返回数据的时候，在header中带上：Access-Control-Allow-Origin，并设置一个值，该值是一个域信息，比如请求者所在的域，当然也可以使用 *，那么客户端在接收到数据以后会比较Access-Control-Allow-Origin的值是否和当前发请求的源一致，如果一致则接收数据，但是该方式有很多限制：浏览器兼容不好，https下有问题

• 后端代理：在和当前请求的源下写一个后端代码，然后通过同源的后端发送请求，当前ajax请求同源下的后端来实现

• JSONP：JSON with Padding

  • 能够发送请求
  • 不受同源策略影响
  • 获取到的数据能够被js执行或使用

• JSONP原理，实现

  • 后端输出一个函数调用字符串，并把数据做为该函数调用的参数
  • 前端定义好对应的后端输出调用函数，并处理好相关业务
  • 利用html中的script能够不受同源策略影响发送http请求，加载对应的后端代码（函数）并执行
  • 为了能够使用更加灵活，通常后端接口接收一个回调函数名称（输出的函数调用的名称），前端传入一个需要使用名称即可

• 注意点：需要和后端约定好需要传输的数据，只能通过queryString传输，

• JSONP优缺点

  • 优势：不需要借助其他额外的技术
  • 缺点：后端接口的安全和私有性比较低，（可以通过服务器来进行配置的），最大的问题是：只支持get请求，并且只支持queryString传递数据