14、跨域 - jsonp

## 同源策略

协议 域名 端口    3个都一致叫同域,有1个不一致叫跨域

## 为什么浏览器不支持跨域

cookie LocalStorage

DOM元素也有同源策略    iframe

ajax 也不支持跨域

## 实现跨域

-  jsonp

-  cors

-  postMessage

-  document.domain    子域和父域

-  window.name

-  location.hash

-  http-proxy    反向代理

-  nginx

-  websocket

jsonp方式:

function jsonp({url, params, cb}) {
  return new Promise((resolve, reject) => {
    const script = document.createElement(‘script‘)
    window[cb] = (data) => {
      resolve(data)
      document.body.removeChild(script)
    }
    params = {...params, cb}    // wd=b&cb=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join(‘&‘)}`
    document.body.appendChild(script)
  })
}
// 缺点:只能发送get请求
// 不安全 xss攻击 不采用
jsonp({
  url: ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,
  params: {wd: ‘b‘},
  cb: ‘show‘
}).then(data => {
  console.log(data)
})

原文地址:https://www.cnblogs.com/zouxinping/p/10339450.html

时间: 01-30

14、跨域 - jsonp的相关文章

js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源.这种安全限制称为同源策略. ( 现代浏览器在安全性和可用性之间选择了一个平衡点.在遵循同源策略的基础上,选择性地为同源策略"开放了后门". 例如img script style等标签,都允许垮域引用资源.) 下表给出了相对 

同源策略和跨域-总结

目录: 1.同源策略 2.跨域 3.几种跨域技术 1.同源策略 什么叫同源? URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.相反,只要协议,域名,端口有任何一个的不同,就被当作是跨域. e.g. 对于http://store.company.com/dir/page.html进行同源检测: URL 结果 原因 http://store.company.com/dir2/other.html 成功 仅路径不同 http://store.company.c

项目中经常遇到的跨域请求的几种方法

什么是跨域 JSONP proxy代理 cors xdr 关于跨域无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Firefox 3.5 及其以后的版本.Chrome浏览器.Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求.在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息. 如

快速入门各种跨域

前言因为学习跨域需要配置本地服务器,可能会比较麻烦,所以自己根据网上的博客写了大多数跨域的简单demo,可以自己在`本地运行`,而且`不用配置服务器`.自己对于跨域的理解刚开始也仅仅在于网上的博客文章,通过写这些可以本地运行的demo让我对跨域有了更直面的理解,希望这些demo对你们有帮助,有错误的话欢迎指正,欢迎PR. github地址: https://github.com/FatDong1/cross-domain 多种跨域demo CROS跨域 JSONP跨域 postMessage跨域

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应

前端跨域的那些事

这一节,我们来讲一讲,前端跨域的那些事,主要分成这样的几部分来讲解, 一.为什么要跨域? 二.常见的几种跨域与使用场景 2.1 JSONP跨域 2.2 iframe跨域 2.3 window.name 跨域 2.4 document.domain 跨域 2.5 cookie跨域 2.6 postMessage跨域 三.总结 一.为什么要跨域 跨域,通常情况下是说在两个不通过的域名下面无法进行正常的通信,或者说是无法获取其他域名下面的数据,这个主要的原因是,浏览器出于安全问题的考虑,采用了同源策略

跨域通信方法总结

本文总结了5种较常见的跨域通信方法,如下: 1)jsonp 2)CORS(Cross OriginResource Sharing,跨源资源共享) 3)主域相同可以设置document.domain 4)利用window.name实现跨域 5)利用window.name实现跨域 jsonp 讲解jsonp之前先看一个例子:假设域A.com上有一个页面a.html,代码如下: var dosomething= function(data){ alert('我是A.com域上的页面,可以被跨域的re

关于jQuery中$.ajax()跨域

今天研究了一些用jquery $.ajax跨域的方法,总结了一些注意事项如下: 首先,跨域JSONP不是AJAX.它不使用XMLHttpRequest.只不过是一个动态脚本元素加载JavaScript代码. Cross-domain JSONP isn't AJAX at all. It doesn't use XMLHttpRequest. It's nothing more than a dynamic script element that loads JavaScript code. Y

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

JSonP跨域请求

我们在通过自己的页面或程序通过ajax请求其它网站或服务时,会存在一个ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准.不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>).   于是可以判断,当前阶段如果想通过纯web端(ActiveX控件.服