跨域解决方案之jsonp

1.背景介绍

什么算是同源？

同一协议，同一域名，同一端口

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://， 域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下：

http://www.example.com/dir2/other.html：同源

http://example.com/dir/other.html：不同源（域名不同）

http://v2.www.example.com/dir/other.html：不同源（域名不同）

http://www.example.com:81/dir/other.html：不同源（端口不同）

请求不同‘源’的数据就算是跨域。

2.知识剖析

JSONP就是为了便于客户端使用数据，

逐渐形成了的一种非正式传输协议，人们把它称作JSONP

3.常见问题

JSONP实现跨域原理?

代码中如何实现?

4.解决方案

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。 JSONP实现跨域请求的原理简单的说，就是动态创建'script'标签，然后利用'script'的src 不受同源策略约束来跨域获取数据。 JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

5.编码实战

第一种

直接添加标签

直接添加一个标签并且设置好回调函数，这样就可以获得数据，但是很危险；

第二种

jquery封装

jquery封装的ajax请求就有这种jsonP的方式，但是需要注意的是，虽然我们有一个回调函数名，但是我们并没有写这个回调函数的方法，因为jquery会自动帮你建立一个这样的回调函数，直接整合在success中，这样就很方便了；

jquery简写

另外就是这种简写方式了，直接封装好了，异常方便。

6.扩展思考

JSONP跨域有什么优缺点？

优点：兼容性很好好，可以在古老的浏览器中运行，

缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求。

7.参考文献

参考一 :  好评率超高的博客文章

参考二 :  软某峰—浏览器同源政策及其规避方法

8.更多讨论

一.还有什么跨域方法呢？

1.另外还有服务器代理跨域，比如nginx反向代理跨域;

跨域属于浏览器策略，反向代码不通过浏览器，也就没跨域问题

server {

listen81;

server_name www.domain1.com

;location / {

proxy_pass http://www.domain2.com:8080;#反向代理

proxy_cookie_domain www.domain2.com www.domain1.com;#修改cookie里域名

index index.html index.htm;

# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用

add_header Access-Control-Allow-Origin http://www.domain1.com;#当前端只跨域不带cookie时，可为*

add_header Access-Control-Allow-Credentialstrue;

    }

}

2.CORS

全称Access-Control-Allow-Origin，需要在服务端设置，前端则无需设置；