1、基于ajax 发起jsonp 请求。

前端代码:

 let url = 'http://localhost:8001/';
$.ajax({
type: 'get',
dataType: 'jsonp',
url: url,
jsonp: "callback",
success: function (res) {
console.log('success',res)
},
error (err) {
console.error(err)
}
})

 后端代码:(node server)

let http = require('http');
http.createServer((req,res) => {
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify({
data: 'hello word!',
status: 'success'
}))
}).listen(8001)

 请求结果:

2、callback函数回调,动态创建script标签

前端代码:

             let url = 'http://localhost:8001/';   
       function ajaxHandle (data) {
console.log('接受data', data)
} var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script)

后端代码:(node server)

let http = require('http');
http.createServer((req,res) => {
res.setHeader('Content-Type', 'application/json')
let callback = req.url.split('&')[0].split('=')[1]; // 获取callback 函数
let data = callback + '(' + JSON.stringify({data: 'hello word!'}) + ')'; // 拼接数据
res.end(data)
}).listen(8001)

 请求结果:

jsonp 实现前端跨域的更多相关文章

  1. 前端跨域(二):JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  2. jsonp与cors跨域的一些理解(转)

    CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...

  3. 前端跨域(一):CORS

    上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...

  4. Django跨域(前端跨域)

    前情回顾 在说今天的问题之前先来回顾一下有关Ajax的相关内容 Ajax的优缺点 AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页 ...

  5. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  6. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  7. VUE006. 前端跨域代理服务器ProxyTable概述与配置

    概述 使用  vue-cli  工具生成一个  vue  项目: vue init webpack my-project-vue 在生成的项目结构里,会有一个  index.js  文件.在这个文件里 ...

  8. jsonp与cors跨域的一些理解

    浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个 ...

  9. JAVA解决前端跨域问题。

    什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...

随机推荐

  1. 『练手』005 Laura.SqlForever历史遗留 的 架构思想缺陷

    005 Laura.SqlForever历史遗留 的 架构思想缺陷 我们 比较一下 Laura.WinFramework 和 Laura.XtraFramework 的差异: Laura.WinFra ...

  2. java8的函数式接口

    函数式接口 就是在java8里允许你为一个接口(只有一个实现的,声明为FunctionalInterface注解的)实现一个匿名的对象,大叔感觉它与.net平台的委托很类似,一个方法里允许你接收一个方 ...

  3. Flink从入门到放弃(入门篇1)-Flink是什么

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  4. Data Lake Analytics + OSS数据文件格式处理大全

    0. 前言 Data Lake Analytics是Serverless化的云上交互式查询分析服务.用户可以使用标准的SQL语句,对存储在OSS.TableStore上的数据无需移动,直接进行查询分析 ...

  5. 聊聊数据库~4.SQL优化篇

    1.5.查询的艺术 上期回顾:https://www.cnblogs.com/dotnetcrazy/p/10399838.html 本节脚本:https://github.com/lotapp/Ba ...

  6. 2017-2018年Scrum状态调查报告

    HOW SCRUM IS USED 在2017年的报告中,Scrum的应用范围在扩大,已经从其发源的IT部门扩展到了相距甚远的业务部门.2017-2018年度报告的其中一个主要目标就是关注更广泛的敏捷 ...

  7. ASP.NET Core的JWT的实现(自定义策略形式验证).md

    既然选择了远方,便只顾风雨兼程 __ HANS许 在上篇文章,我们讲了JWT在ASP.NET Core的实现,基于中间件来实现.这种方式有个缺点,就是所有的URL,要嘛需要验证,要嘛不需要验证,没有办 ...

  8. wordpress 图片上传冲突

    网上常见的wordpress图片上传 jQuery('#upload_image_button').click(function() { //formfield并未用上,可能代码遗漏了一段,怀疑和类的 ...

  9. Webpack4教程 - 第三部分,如何使用插件

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/07/23/webpack-4-course-part ...

  10. 44.Odoo产品分析 (五) – 定制板块(1) – 管理odoo安装(1)

    查看Odoo产品分析系列--目录 1 管理员的注意事项 在记录重要的配置细节时必须要小心,而且必须要有一个连续性的合适的.让系统能够安装备份并运行在一个可接受的时间内的计划. 1.1 制定实施策略 如 ...