美文网首页程序员
跨域的几种方式

跨域的几种方式

作者: chasing_dream | 来源:发表于2018-03-19 21:56 被阅读61次

目前常用的3种跨域方式

1、后台加入白名单
2、jsonp
3、 服务器中转/代理、比如说一个PHP文件,请求资源因为PHP去请求资源是不存在跨域问题,可以利用PHP把资源拿过来,然后咱们再去请求PHP文件就可以了(前提就是PHP文件和你的文件在同域下)

细讲jsonp跨域的实现方式

原理

JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

工作原理

利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如: <script src="http://www.example.net/api?param1=1&param2=2"></script> 并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

实现步骤

首先定义一个方法用来请求数据
添加了一个script标签,标签的src指向了另一个要访问下的js脚本
以下是代码实现

<script type="text/javascript">
    function jsonhandle(data){
      console.log(data)
    }
</script>

<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=b&json=1&p=3&sid=1445_21090_17001&req=2&csor=1&cb=ddd" type="text/javascript" charset="utf-8"></script>

相关文章

  • Ajax 请求和跨域

    跨域的几种方式: cors方式 cross-orign-resource-shareing(跨域)参考:http:...

  • #hello,JS:15 同源策略 & 跨域(JSONP)

    跨域有几种常见的方式?你有没有跨域使用的经验? 方式: 使用jsonp实现跨域?使用cors实现跨域?浏览器另类的...

  • 跨域问题

    前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域? 广义...

  • JavaScript 九种跨域方式实现原理

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域?...

  • JavaScript 九种跨域方式实现原理

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域?...

  • JavaScript 九种跨域方式实现原理【转】

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域?...

  • 九种跨域方式实现原理(完整版)

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域?...

  • 常见前端开发面试题(http部分)

    跨域有哪几种方式 1.jsonp跨域2.CORS跨域资源共享3.iframe标签跨域4.在webpack中通过配置...

  • 九种跨域方式实现原理

    前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域? 1....

  • 跨域

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 1. 什么是跨域...

网友评论

    本文标题:跨域的几种方式

    本文链接:https://www.haomeiwen.com/subject/xmkrqftx.html