声明：本文转载自https://my.oschina.net/u/3407699/blog/1637825，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
jsonp实现的原理主要是利用src属性可以去加载跨域的资源，例如script、img。 动态的创建script标签，加载跨域资源
下面看一个简单的例子： 前端：（本页面的端口号为63342）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script src="http://localhost:8080/js/index.js"></script>//去加载跨域资源 </html> 跨域资源站点后端（我这里使用nodejs写的，很简单的一个server）：
const express=require('express'); const fs=require('fs'); const expressStatic=require('express-static') var server=express(); server.get('/js/index.js',function (req,res) { fs.readFile('./js/index.js',function (err,data) { if(err){ res.send('数据读取失败') }else { res.send(data); } res.end(); }) }) server.listen(8080); 那么我们可以在前端页面看到结果，如图 
二、用xhr去请求数据会怎么样呢： 前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span>名字:</span><span class="name"></span><br/> <span>年龄:</span><span clase="age"></span> </body> <script > function XHR() { var xhr; try { xhr = new XMLHttpRequest(); } catch (e) { var IEXHRVers = ["Msxml3.XMLHTTP", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0, len = IEXHRVers.length; i < len; i++) { try { xhr = new ActiveXObject(IEXHRVers[i]); } catch (e) { continue; } } } return xhr; } var xhr = XHR(); xhr.open('GET', 'http://localhost:8080/json/test.json', true); xhr.onreadystatechange = function () { //xhr.onload= if (xhr.readyState == 4) { if (xhr.status == 200) { var da = xhr.responseText; eval("var json=" + da); console.log(json); } else { console.log("数据请求出错"); } } } // xhr.onerror=function () { // console.log('数据请求出错') // } xhr.send(null) </script> </html> 后端：
const express=require('express'); const fs=require('fs'); // const expressStatic=require('express-static'); var server=express(); server.get('/json/test.json',function (req,res) { var obj=req.query; fs.readFile('./json/test.json',function (err,data) { if(err){ res.send('数据读取失败') }else { res.send(data); } res.end(); }) }) // server.use(expressStatic('./')) server.listen(8080); console.log('启动成功') 结果：跨域了无法请求到数据
三、相对jsonp只能请求get数据，cors跨域资源共享实现跨域请求资源更好 只需要后端实现cors接口就好，改变http响应头。
const express=require('express'); const fs=require('fs'); // const expressStatic=require('express-static'); var server=express(); server.get('/json/test.json',function (req,res) { var obj=req.query; res.header("Access-Control-Allow-Origin", "*");//所有站点都可以访问该资源 res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); fs.readFile('./json/test.json',function (err,data) { if(err){ res.send('数据读取失败') }else { res.send(data); } res.end(); }) }) // server.use(expressStatic('./')) server.listen(8080); console.log('启动成功') 
本文发表于2018年03月17日 22:38
(c)注：本文转载自https://my.oschina.net/u/3407699/blog/1637825，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 1852 讨论 0 喜欢 0
BigData NoSQL —— ApsaraDB HBase数据存储与分析平台概览
HeyUI组件库按需加载功能上线，盘点HeyUI组件库有哪些独特功能？
从HelloWorld看Knative Serving代码实现
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
万稳万当，不如一默。任何一句话，你不说出来便是那句话的主人，你说了出来，便是那句话的奴隶。 18:22 04月20日 查看详情 |
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |