跨域问题及其解决方案

一、 什么是跨域问题？

跨域是指浏览器不能执行其他网站的脚本，他是由浏览器的同源策略导致的，是浏览器对JavaScript施加的安全限制。
所谓同源是指，协议、域名和端口号均相同。
注意：localhost与127.0.0.1虽说都代表本机，但是也非同源。

二、解决跨域问题的方法

1.jsonp(json padding)
jsonp利用<script>标签的没有跨域限制的漏洞，来达到与第三方通讯的目的。
当需要与第三方通讯时，在本站创建一个<script>元素，地址指向第三方API，并创建一个回调函数，当返回结果时，调用该回调函数，处理返回结果。回调函数名称可通过地址参数告知，也可双方事先约定。返回结果形如：
callback({“name”:”li”,”age”:18})

2.cors(跨域资源共享)
cors定义了在访问跨域资源时，浏览器与服务器之间如何沟通。基本思想是使用自定义的头部来让浏览器和服务器之间进行沟通，从而决定请求或响应是应该成功或者失败。

• 不会触发CORS预检请求的情况：
  
  • 请求类型为GET、POST、HEAD
  • 当发送POST请求时，仅当Content-Type值等于下列之一：
    text/plain
    multipart/form-data
    application/x-www-form-urlencoded

• 触发CORS预检请求的情况

  • 请求类型为DELETE、OPTIONS、 TRACE 、PUT、 CONNECT 、PATCH

  • 认为设置了cors安全首部字段集合之外的其他首部字段。

    • cors安全首部字段集合为：
      
      • Accept
      • Accept-Language
      • Content-Language
      • Content-Type (but note the additional requirements below)
      • DPR
      • Downlink
      • Save-Data
      • Viewport-Width
      • Width

  • Content-Type 的值不属于下列之一:

    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

总结：
jsonp与cors的区别：
1.请求类别
jsonp只支持GET请求，cors支持所有类型的请求方式
2.浏览器版本
jsonp支持较老版本的浏览器，cors支持绝大多数的现有浏览器
3.发送请求
cors可以使用普通的XHR发送请求和获取数据，与jsonp相比，有更好的错误处理机制。
jsonp只支持跨域http请求，不能解决不同域的两个页面之间JavaScript进行调用的问题。
4.同源策略限制
jsonp不受同源策略限制，兼容性更好
CORS在进行ajax请求时，为了兼容IE浏览器，还需创建ActiveX对象。