Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

一个基于node和express的小工具,用来解决前端数据接口调用所产生跨域的问题

Notifications You must be signed in to change notification settings

vaeer/node-proxy

Open more actions menu
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

项目简介

一个基于 nodeexpress的小工具,用来解决前端数据接口调用所产生跨域的问题,基本原理只是起到一个api服务中转的作用,就是将远程的api接口映射到本地服务器上。

使用方法

1、直接下载文件到你的node后端服务主目录下(或者直接把node-proxy下的proxy.js文件拷贝到主目录下),如我的文件目录如下

Alt text

2、安装依赖文件,在你的package.json中的依赖项加入http、request、express、body-parser、ejs等依赖项,如我的package.json:

{
  "name": "node-proxy",
  "main": "main.js",
  "dependencies": {
    "express": "~4.0.0",
    "mongoose": "~3.6.13",
    "body-parser": "~1.0.1",
    "formidable": "*",
    "redis": "*",
    "mysql": "*",
    "ejs":"*"
  },
  "devDependencies": {
    "request": "^2.74.0"
  }
}

其中依赖项放在devDependencies还是dependencies中无所谓,(body-parse貌似是来解析app回调函数中的参数的,最好加上吧) 3、在node服务的主文件main.js中加入以下代码:

var express = require('express');
var app = express();
var http = require("http");
var bodyParser = require('body-parser');
var proxy = require('./proxy');
var ejs = require('ejs');
var port = process.env.PORT||2016;
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
//页面渲染(页面路由)
app.use(express.static(__dirname+'/'));
app.set('views', __dirname + '/');
app.engine('.html', ejs.__express)
app.set('view engine','html');
app.get("/",function(req,res){
	res.render('index');
});
proxy.setProxy(app,'/api/weather','http://op.juhe.cn/onebox/weather/query');
http.createServer(app).listen(port);
console.log("正在监听%d端口...",port);

以上代码实现请求将聚合数据-天气API代理到本地的/api/weather路径下。使用接口方法node main.js

Alt text

然后在index.html中加入以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>node-proxy代理</title>
  <script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>

</body>
<script>
var val = '北京';
var tianqiData = {
        cityname:val,
        key: '05eaf356f8c8c6b6a7d860deb3750f19'
    };
tianqiData.cityname = decodeURI(encodeURI(tianqiData.cityname));
$.get('/api/weather',tianqiData,function(data){
  console.log(data);
});
</script>
</html>

浏览器输入localhost:2016,结果如下:

Alt text

之前在前端调用聚合数据的api是需要会出现跨域问题(貌似还不能使用jsonp),现在使用这个可以解决这个问题.

About

一个基于node和express的小工具,用来解决前端数据接口调用所产生跨域的问题

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 65.5%
  • HTML 34.5%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.