jsonp 实现前端跨域
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标签
前端代码:
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 实现前端跨域的更多相关文章
- 前端跨域(二):JSONP
上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...
- jsonp与cors跨域的一些理解(转)
CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...
- 前端跨域(一):CORS
上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...
- Django跨域(前端跨域)
前情回顾 在说今天的问题之前先来回顾一下有关Ajax的相关内容 Ajax的优缺点 AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页 ...
- 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
- 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- VUE006. 前端跨域代理服务器ProxyTable概述与配置
概述 使用 vue-cli 工具生成一个 vue 项目: vue init webpack my-project-vue 在生成的项目结构里,会有一个 index.js 文件.在这个文件里 ...
- jsonp与cors跨域的一些理解
浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个 ...
- JAVA解决前端跨域问题。
什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...
随机推荐
- 接口自动化:HttpClient + TestNG + Java(五) - 接口测试数据驱动
在上一篇中,我们实现了post方法请求的封装和测试,这一篇我们做测试数据的分离. 5.1 测试数据处理思路 5.1.1 测试数据分离 这里我想到,我们之前的测试demo里,全都是在testNG类里去写 ...
- vue.js移动端配置flexible.js
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...
- Python编程从入门到实践笔记——变量和简单数据类型
Python编程从入门到实践笔记——变量和简单数据类型 #coding=gbk #变量 message_1 = 'aAa fff' message_2 = 'hart' message_3 = &qu ...
- Python3+Selenium2完整的自动化测试实现之旅(一):自动化测试环境搭建
1 环境搭建准备 (1) 下载Python3版本的安装包,直接官网下载即可:Python官网:https://www.python.org/ (2) 下载Python的基础工具包p ...
- Cayley图数据库的简介及使用
图数据库 在如今数据库群雄逐鹿的时代中,非关系型数据库(NoSQL)已经占据了半壁江山,而图数据库(Graph Database)更是攻城略地,成为其中的佼佼者. 所谓图数据库,它应用图理论( ...
- centos下 .net core 2.0 升级 到 2.1 遇到的一个小问题
.net core 2.0的安装方式,可能不是用yum方式安装的,所以,在用yum安装2.1之后,无法运行.net core 所以用来下面的这个命令,重新映射一下dotnet目录. ln -s /us ...
- 解决Spring MVC前台传参中文乱码问题
在web.xml文件中配置字符编码过滤器: <filter> <filter-name>CharacterEncoding</filter-name> <fi ...
- 通用查询类封装之Mongodb篇
查询在应用程序中很重要,花样也特别多,不同得业务需求需要不同的查询条件,还要支持and.or ……事实上也确实如此,程序中有N多个查询类,并且很可能其中有多个类查询同一张表,所以特别想弄一个通用的查询 ...
- Docker的使用
Ubuntu16.04+ 在Ubuntu系统中安装较为简单,官方提供了脚本供我们进行安装. sudo apt install curl curl -fsSL get.docker.com -o get ...
- CAD 在ARCGIS中的坐标系问题
近期在使用服务(文本写入dxf方式)导出CAD的时候发现导出的CAD文件和原始数据在ArcMap中叠加后不能重合,出现了错位的现象. 查看CAD文件后发现CAD的坐标系及投影和数据不一致导致的.遇到这 ...