使用反向代理(Node.js)调试前端Ajax_Linux编程_Linux公社-Linux系统门户网站
你好，游客
使用反向代理(Node.js)调试前端Ajax
来源：Linux社区&
作者：jamesfancy
　　最近需要调式大量包含Ajax的前端代码，数据是采用的JSON格式。作为一个懒人，我不想每次都去打开 Visual Studio 来跑服务（VS实在太重量级了）。但是Ajax访问有跨域的问题，不能直接从本地JSON文件中去取模拟数据，所以我跑了一个NodeJS+Express来做数据模拟。
　　另外，用JSON文件来模块数据还有两个问题：一是就算同一个API，不同的业务处理都有不同的返回结果，何况API还不是少数；另外，Ajax调用同一个API，根据业务处理不同，需要返回不同的结果&&这是静态JSON文件做不到的。
　　如果用NodeJS来模拟业务分支，返回不同的结果&&虽然可以实现，但是相当于重新写了个简化版业务，太累太累&&。那么，用NodeJS把获取的请求转发给开发服务器，再把开发服务器返回的结果返回到前端呢&&这个办法好，标准的反向代理模型。
　　然后就是去寻找NodeJS的代理组件了，找到了 node-http-proxy 和 simple-http-proxy，经过简单的试验都没让它们工作起来，可能是有地方配置错了。由于不想费神去研究这两个东东，干脆直接用NodeJS的http.request来实现。反正只是做JSON代理，而且也没有什么业务逻辑在里面。
　　基本思路就是为 express 写一个路由处理模块，把所有 "/api/" 开始的 URL 都用这个路由处理器模块来处理。这个模块将收到请求的URL转换成开发服务器上的URL，再把请求的参数原样带上，然后将开发服务器上返回的结果直接返回给浏览器。
Node.js 的详细介绍：Node.js 的下载地址：
相关阅读：
Node.Js入门[PDF+相关代码]
Node.js入门开发指南中文版
Node.js安装与配置
编译安装Node.js
在 app.js 中添加路由配置
app.get("/api/*", require("./routes/proxy").proxy);
然后添加一个文件 routes/proxy.js，用来做简化版反向代理
var http = require("http");
var querystring = require("querystring");
exports.proxy = function(req, res) {
& & // 获取 /api/ 之后的的 URL 路径
& & var path = req.path.replace(/^\/?api/, "");
& & // 获取请求参数
& & var contents = querystring.stringify(req.querystring);
& & var options = {
& & & & // TODO 配置访问参数
& & // 作为 http 客户端向服务器端发送请求
& & var request = http.request(options, function(response) {
& & & & if (response.statusCode != 200) {
& & & & & & // TODO 请求失败，返回错误
& & & & & &
& & & & // TODO 把 response 得到的数据通过 res 发送给浏览器
& & // 向服务器发送请求
& & request.write(contents);
& & request.end();
其中，根据文档，options 部分需要配置服务器主机、路径、请求方法等，直接从网上找了一段改改（嗯，一看就是抄的，因为我喜欢用双引号）：
var options = {
& & host: 'dev.',
& & path: path,
& & method: 'GET',
& & headers: {
& & & & 'Content-Type': 'application/x-www-form-urlencoded',
& & & & 'Content-Length': contents.length
然后是处理开发服务器的返回结果。两种情况，正常的情况应该返回JSON数据，返回代码200；异常（比如网络异常）的情况，应该返回非200代码。
先处理异常的情况
if (response.statusCode != 200) {
& & res.status(response.statusCode).end();
再处理正常的情况
response.setEncoding('UTF-8');
response.on('data', function(data) {
& & var obj = JSON.parse(data)
& & res.json(obj);
　　本来得到数据之后是可以直接发送给浏览器的，但是因为服务器返回出来的JSON数据是紧缩格式，人不易识别，所以干脆重新处理了下，方便调试。
相关资讯 & & &
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款posts - 6,&
comments - 6,&
trackbacks - 0
XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
上面是我学习nodejs中碰到的一个异常，下面有代码以及解决方案。
1）js文件代码
var http=require('http');var querystring=require('querystring');
http.createServer(function(req,res){ 　　var postData=''; 　　req.setEncoding('utf8');
　　req.on('data',function(chunk){
　　　　postData+= 　　}); 　　req.on('end',function(){
　　　　res.end(postData+"hehe"); 　　});}).listen(3000);console.log("服务启动。。。")
2）前端html页面代码
&!DOCTYPE html&&html lang="en"& &head&
&meta charset="UTF-8"&
&title&&/title&
&script src="jquery-1.8.3.js"&&/script&
&script type="text/javascript"&
$(function(){
　　$("#test").click(function(){
　　　　$.ajax({
　　　　　　'url':'http://localhost:3000',
　　　　　　'method':'POST',
　　　　　　'data':{},
　　　　　　'success':function(data){
　　　　　　　　console.log(data);
　　　　　　}
　　　　});
&/script& &/head& &body&
&p id="test"&click me&/p& &/body&&/html&
这是一个简单的ajax访问nodejs服务器demo,我的服务运行在windows10系统上。
win键+R 输入CMD 调出命令行工具，输入:node -v & &查看是否安装了nodejs以及版本。
通过cd命令定位到js文件所在目录，输入:node js文件名 & &运行js文件
谷歌浏览器打开html文件点击click me然后按F12发现上文所说错误。
解决思路，百度一下发现是ajax跨域访问问题
在createServer方法里面第一行设置&res.setHeader('Access-Control-Allow-Origin', '*');
*号代表允许任何与的请求，当然实际生产环境不可能这么做。
你可以通过报错提示找到被拒绝的域然后设置res.setHeader('Access-Control-Allow-Origin', '域名');
比如我在HBulider里面打开html文件是这样设置res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8020');
在本地直接打开html文件可以这样子设置res.setHeader('Access-Control-Allow-Origin', 'null');
http://wishing.vip/ 这是我的移动端博客网址，里面有很多H5的实例。
会java或者c#等服务端语言的可以对比下
nodejs搭建一个web服务的是多么简单，不需要tomcat等http服务器，因为它内置了一个http服务器。
阅读(...) 评论()Nodejs（七）-跨域访问 - hongtoushizi - ITeye技术网站
今天在使用ajax（API（
XMLHttpRequest cannot load http://localhost:3000/mock/items.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed access.
晚上说不能跨域访问，完全不懂这个概念啊，所以简单介绍一下。
首先给大家介绍一下这个问题的解决方案，我是在node代码中设置跨域访问。
var app = express();
//设置跨域&strong&访问&/strong&
app.all('*', function(req, res, next) {
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/charset=utf-8");
把Access-Control-Allow-Origin设置为‘*’，表示任意origin可以访问该API. 在实际应用中这样是不安全的，需要制定具体的origin。
当然也可以只对某些url设置跨域访问：
router.get('/', function(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.send('respond with a resource');
域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。
跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Web font 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。
同源策略：如果两个页面的协议、域名和端口是完全相同的（IE的同源策略不包含端口），那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置document.domain 属性将它们认为是同源的。
出于安全性考虑，浏览器将不允许跨域页面间的JS相互操作，如：主页面和跨域IFrame之间的JS操作，也不允许XMLHttprequest请求跨域内容。
在浏览器中不能直接来跨域访问，而在服务器端没有跨域安全限制。
其他解决方法
主域名相同的跨域情形
设置document.domain属性。如果想做到数据的交互，那么和必须由你来开发才可以。可以将用iframe添加到 的某个页面下,在和iframe里面都加上document.domain = “aa.com”，这样就可以统一域了，可以实现跨域访问。就和平时同一个域中镶嵌iframe一样，直接调用里面的JS就可以了。
当两个域不同时,如果想相互调用，那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新，可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史，你在前进和后退时就需要处理，非常麻烦。不过再做简单的处理时还是可以用的。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里，a通过JS修改iframe的hash值，b里面做一个监听（因为JS只能修改hash，数据是否改变只能由b自己来判断），检测到b的hash值被修改了，得到修改的值，经过处理返回a需要的值，再来修改a的hash值（这个地方要注意，如果a 本身是那种查询页面的话比如
JS脚本植入
通过页面动态加载&script&标签实现，该标签的SRC属性设置为跨域请求的URL地址，返回的内容为method(…)形式，其中method为页面内的JS回调函数，通过执行该函数来实现改变。
JQuery实现
function jsonpajax_1() {
url: "http://192.168.1.105:8123/Handler.ashx?callback=?",
type: "get",
dataType: "jsonp",
jsonp: "callback",
success: function(data) {
var tt = '';
$.each(data, function(k, v) {
tt += k + "：" + v + "&br/&";
$("#divmessage").html(tt);
此时，跨域的Web1中的ashx文件数据提供要改一下：
string callback = context.Request.Params["callback"];
context.Response.Write(callback+"("+strJson+")");
jsonp的最基本的原理是:动态添加一个&script&标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
如果设为dataType: ‘jsonp’, 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，
我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。
hongtoushizi
浏览: 105669 次
来自: 天津
想要建立实时web，推荐GoEasy的web实时推送，他们是专 ...
gaoyaohuachina 写道不明白你在干吗，改名字直接新 ...
不明白你在干吗，改名字直接新建一个用户，把原来用户user d ...2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2013年10月 Web 开发大版内专家分月排行榜第三
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
本帖子已过去太久远了，不再提供回复功能。}