jsonp请求参数头设置_面试经典之Jsonp跨域原理

在前端面试中，跨域似乎是一个必问的环节，从跨域的出现到跨域的解决方案，这一系列是前端必须要掌握的内容。本次仅这一个系列中的一小环展开讨论，并且深入其原理了解其用法。

跨域是什么？

首先，跨域是浏览器本身施加的安全限制，并不是人为的给某一个特定的网站设置的。其次，跨域是浏览器上的概念，服务端不存在跨域的说法。本质，浏览器的同源策略决定了一个网站不可以执行非本网站下的脚本。

浏览器的同源策略，即指网站域名，请求协议，服务端口均相同 ，看下面跨域的例子。

http://www.qq.com调用http://www.baidu.com, 属于跨域；

http://www.qq.com调用http://qq.com, 属于跨域；

http://www.qq.com调用http://www.qq.com:81, 属于跨域；

http://www.qq.com调用https://www.qq.com, 属于跨域；

如果www.qq.com的服务器ip是127.0.0.1， 

http://www.qq.com调用https://127.0.0.1，属于跨域；

解决跨域的方式

跨域的出现是为了web安全，但是也限制了我们的使用能力，例如你的网站要调用一个第三方平台的api，这个时候不得不面对跨域的问题，这时候就要思考如何解决跨域。

1. 就如上面的这个三方API，首先你可以考虑让后端转发，因为服务端不存在跨域，后端通过转发再将数据返回给你，变成非跨域请求。

2. 后端不能提供接口转发，就要思考如何即让跨域存在又能获取数据，第一种方式，服务端返回头信息修改，要让三方平台服务端接口给你的网站加跨域头，这个是可以的，但是一般情况三方平台接口不可能为你的网站改变的，因为三方平台面对大量的网站。一般会提供另一种方式，三方平台Api在写好后按一种特定类型返回，其他网站接入时，平台本身完全不在改变，只需要调用方决定即可，这时候你应该想到jsonp。

Jsonp(JSON with Padding)

实质是一种跨域数据获取的解决方案，本质是利用html中的script标签的跨域调用能力。

在网站中，我们一般使用

实现一个Jsonp

1. 服务端(三方平台)API 设计

// api可以接受一个callback参数， 存在callback时，拼接返回结果http://xxx.com/api?callback=fn... 提取callback参数fn... 拼接返回内容response： fn({  "code": 1,  "data": true})

2. 客户端请求格式

<script type="text/javascript">  function handle(response) {    console.log('response', response);  }  const oScript = document.createElement('script');  oScript.setAttribute('src','http://xxx.com/api?callback=handle');  oScript.setAttribute('type','text/javascript');  document.body.appendChild(oScript);script>

3. 代码解释

首先创建一个script标签，script的src属性即是三方平台的地址，该地址需要带一个必选参数callback，并且它的值是一个已经被定义好的函数，当script加载完成后，由于脚本内容已经约定好，执行起脚本内容时，即执行已定义好的函数，并且将请求内容返回作为函数参数返回，成功解决跨域。

4. 实例

如下这个接口是iqiyi的一个jsonp接口，可以用来调试，查看其返回值。

http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=func

总结

上述将jsonp的原理简单实现完成，从它的本质就可以看出一个明显缺点，因为script标签仅支持get，所以jsonp也仅仅能对get请求跨域，不能支持post。还有另一个缺点，即callback传入的参数是在后端进行了一次拼接，这即代表存在注入的可能，如果后端设计不当，是有可能出现安全风险的。

如果对你有帮助的话，记得点订阅哦，欢迎你的关注！