PHP跨域请求nodejs

  摘要:用nodejs作为服务器,php作为客服端进行跨域请求,并返回数据。

  一:windows环境下的nodejs安装(以及express模板的安装):http://blog.uifanr.com/2013/03/12/472

                       http://www.veryhuo.com/a/view/39756.html

  二:测试安装

    1:在cmd中输入:node -v 若出现版本号,则安装成功。

    2:在D 盘下新建一个文件  test_node.js :

 1 var http = require("http");
 2
 3 http.createServer(function(request, response) {
 4
 5 response.writeHead(200, {"Content-Type": ‘application/json;charset=UTF-8‘});
 6
 7 response.write("hello");
 8
 9 response.end();
10
11 }).listen(8899);
12
13 console.log("nodejs start listen 8899 port!");

3:在 cmd 中进入D 盘;运行  node test_node.js。 出现:  。   打开浏览器,输入   http://127.0.0.1:8899  会出现   hello

  三:PHP跨域请求 nodejs  服务:

    1: 在D盘下新建一个文件夹 node,在 cmd 中进入 D:/node/  文件夹下新建项目:

    其中 node_modules 文件夹通过node引入:  在终端进入 D:\node\nodejs-demo\ 文件夹下  npm install express ,将会在该文件夹下建立node_modules,并在

其中引入 express模板,再引入一个模板  :npm install ejs  ,将会在node_modules文件夹下引入 ejs 模板。框架大体就搭建好了。

    2:routes 文件夹下新建一个 js 文件,services.js  :

 1 exports.index = function (req, res) {
 2     var params = req.params;//得到3000:后的 shows。
 3     switch (params[0]) {
 4         case ‘shows‘:
 5             shows(req, res);
 6             break;
 7         case ‘select‘:
 8           //  selects(req, res);
 9             break;
10     }
11 };
12
13 var shows = function (req, res) {
14     var msg = req.headers.num;//得到
15     var val = req.headers.val
16     res.setHeader(‘Content-Type‘, ‘application/json;charset=UTF-8‘);
17     res.send({
18         ‘status‘: 1,
19         ‘data‘: " hellow.date: " + val,
20         ‘url‘: " hellow.URL: " + msg,
21     });
22     res.end();
23 };

  其中 req 为请求数据,req.params 得到请求的第一个参数(app.js有配置),req.headers.num  得到客户端 请求的num 参数。

3:配置 app.js  :

 1 var express = require(‘express‘);
 2 var routes = require(‘./routes‘);
 3 var user = require(‘./routes/user‘);
 4 var services = require(‘./routes/services‘);
 5 var http = require(‘http‘);
 6 var path = require(‘path‘);
 7
 8 var app = express();
 9
10 // all environments
11 app.set(‘port‘, process.env.PORT || 3000);
12 app.set(‘views‘, path.join(__dirname, ‘views‘));
13 app.set(‘view engine‘, ‘ejs‘);
14 app.use(express.favicon());
15 app.use(express.logger(‘dev‘));
16 app.use(express.json());
17 app.use(express.urlencoded());
18 app.use(express.methodOverride());
19 app.use(app.router);
20 app.use(express.static(path.join(__dirname, ‘public‘)));
21
22 // development only
23 if (‘development‘ == app.get(‘env‘)) {
24   app.use(express.errorHandler());
25 }
26
27 app.get(‘/‘, routes.index);
28 app.get(‘/users‘, user.list);
29
30 app.get(‘/service/*‘, services.index);
31 app.post(‘/service/*‘, services.index);
32
33
34 http.createServer(app).listen(app.get(‘port‘), function(){
35   console.log(‘Express server listening on port ‘ + app.get(‘port‘));
36 });

  通过引入添加的app.js 很多都已经配置好了,只需要添加你自己的 js 文件路径:./routes/services 即是刚才新建的 js 文件。 app.get 和app.post 分别接收get传值和post传值。

在 app.get(‘/service/*‘, services.index); 中 services.index 指向 services.js 文件中的 exports.index = function (req, res){} 函数。到此,服务端就算配置好了。

  4:进入admin 文件夹中 新建 cenlent.php 文件,作为请求代理:

 1 <?php
 2
 3     $value = $_POST["values"];
 4     $url = $_GET["url"];
 5
 6     $heads = array (
 7         ‘val:‘ . $value,
 8         ‘num:‘.$url,
 9     );
10
11     //$fields = array(
12     //    ‘vals:‘.‘中心‘
13     //);
14
15     $ch = curl_init ();
16     // 设置选项,包括URL
17     curl_setopt ( $ch, CURLOPT_URL, $url );
18     curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 );
19     curl_setopt ( $ch, CURLOPT_HEADER, 0 );
20     curl_setopt ( $ch, CURLOPT_HTTPHEADER, $heads);
21     curl_setopt ( $ch, CURLOPT_TIMEOUT, 5 ); // 定义超时5秒钟
22     //curl_setopt ( $ch, CURLOPT_POST, 1 ); // POST数据
23     //curl_setopt ( $ch, CURLOPT_POSTFIELDS, $fields ); // 把post的变量加上
24
25     $result = curl_exec ( $ch );
26     curl_close ( $ch );
27     if($result != null){
28         $results=array(
29             ‘status‘=>1,
30             ‘data‘ => $result
31         );
32     }else{
33         $results=array(
34             ‘status‘=> -1,
35             ‘info‘ => ‘服务器错误‘
36         );
37     }
38     header ( ‘Content-Type:application/json; charset=utf-8‘ );
39     echo json_encode($results);
40     return ;

  代码中的  $heads = array ( ‘val:‘ . $value,‘num:‘.$url, );      val 和 num 即为 services.js 中的  var msg = req.headers.num; 和  var val = req.headers.val; 的请求数据。

  注:PHP 服务需要开启 php_curl.dll

    (1).打开php.ini,开启extension=php_curl.dll

      (2).检查php.ini的extension_dir值是哪个目录,检查有无php_curl.dll,没有的请下载php_curl.dll,再把php目录中的libeay32.dll,ssleay32.dll拷到c:\windows\system32里面.

    (3):关于curl_init :http://www.open-open.com/lib/view/open1408151927286.html

  5:数据请求(html)在文件夹 /AdminPHP/vew/ 下新建 html 文件 index.html:

    

1 <form id="file" method="post" enctype="multipart/form-data">
2     传输值:<input type="text" name="value" id="value" />
3           <input type="button" value="上传" onclick="submits()"/>
4 </form>

构建这样一个界面: 

    javascript中的jquery的post传值:

 1 <script>
 2         var conf = {
 3             domain: ‘http://127.0.0.1:3000/‘
 4         };
 5         function submits() {
 6             var url = conf.domain + ‘service/shows‘;
 7             var vals = $("#value").val();
 8             $.post(‘../admin/cenlent.php?url=‘+ encodeURIComponent(url), {values : vals}, function (data) {
 9                 if (data.status == 1) {
10                     datas = eval("[" + data.data + "]");
11                     var msg = ‘返回数据:‘ + datas[0].data + ‘  ;请求页面:‘ + datas[0].url;
12                     alert(msg);
13                 } else {
14                     if (data.info !== undefined) {
15                         alert(data.info);
16                     } else {
17                         alert(‘发生未知的异常,请重试~!‘);
18                     }
19                 }
20             }, ‘json‘);
21
22             return false;
23         }
24 </script>

代码中: domain: ‘http://127.0.0.1:3000/‘   为请求的服务器地址(这是在本地测试,端口号在 app.js 配置中 app.set(‘port‘, process.env.PORT || 3000);)。

       var url = conf.domain + ‘service/shows‘; 中 ‘service/shows‘ -- services 对应于 app.js 配置文件的 app.post(‘/service/*‘, services.index);  即向 services.index 发起请求。

  而其中的  /shows 则是对方法的请求 ,在 services.js  文件中的  var params = req.params  即得到怕rams = shows 。

  6.测试:

    (1):在 cmd 终端进入 D:\node\nodejs-demo 文件夹下,输入  : node app.js   开启服务进程。(终端会打印出 Express server listening on port 3000);

    (2):在浏览器中输入 http://127.0.0.1/****/nodejs-demo/AdminPHP/view/   运行  index.html ,即必须在服务器运行 index.html 文件。 (注意:将  node 文件夹全部复制到 本地服务器 如:apache 的根目录下,不能使用 右击 index.html 用浏览器打开)。

          如图: 

     单击上传,即可到回复 :

          

再次查看 终端:

          

  参考文件:  http://www.cnblogs.com/flyoung2008/archive/2012/07/22/2603791.html

         http://blog.uifanr.com/2013/03/12/472

         http://www.open-open.com/lib/view/open1408151927286.html

时间: 2024-08-24 09:28:39

PHP跨域请求nodejs的相关文章

Nodejs解决所有跨域请求

Nodejs解决所有跨域请求 app.use(function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorizati

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.

Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问题上,域仅仅是通过“ url的首部 ”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP),之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 但很多时候我们却又不得不

如何解决 XMLHttpRequest 跨域请求的问题

在Web开发中,跨域请求是一个常见的问题,解决的办法有多种,这里推荐一个轻量级的针对 XMLHttpRequest 请求的跨域解决方法. 闲话不说,直接看code: 客户端发起一个跨域的请求: anHttpRequest = new XMLHttpRequest(); anHttpRequest.onreadystatechange = function() { if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200

MediaElement.js之浏览器跨域请求视频播放

浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(http,https).域名(baidu.com,sina.com).端口(80,81)三者之间任意一与当前页面地址不同即为跨域 详解:http://www.cnblogs.com/dojo-lzz/p/4265637.html -jsonp(这里推荐 http://kb.cnblogs.com/pa

浏览器跨域请求之credentials

-时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读取别的接口的时候,返回的信息确实提示我尚未登录.此时此刻,我一脸蒙逼.明明我已经登陆了啊.后来偶然得知这是因为浏览器的机制问题. -初步解决- 大概的意思是,默认情况下,标准的跨域请求是不会发送cookie等用户认证凭据的.所以,当你再次访问远程api的时候,cookie是不会被带上的,于是乎,服务

JSonP跨域请求

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

跨域请求资源的几种方式

跨域请求资源的几种方式 由于浏览器同源策略,凡是发送请求URL的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. (1)JSONP(jsonp跨域get请求) 这种方式主要是通过动态创建一个script标签,浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行:(创建script标签向不同域提交http请求的不会被拒绝的方法,jsonp标签的src属性是没有跨域限制的) 实际项目中JSONP通常用来获取json格式数据,这时前后端通常约定一个参数callback,

AJAX跨域请求数据

由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请