最近看了看node，用node实现一些简单的接口可以在本地请求到数据并且不会出现跨域问题。
安装node
直接去node官网根据自己需求下载安装即可，比较简单不做介绍了。
我目前用到的版本还是比较新的
项目初始化
可用最新的命令:npm init -y
也就是默认接受他所有的配置，这样会在你的根目录下生成一个package.json文件，里面有一些项目配置信息。
我的demo项目目录结构：
server.js(文件名自己取即可)写node的相关操作，可以起node服务。
index.html一个普通的html页面。
这里只是一个简单的demo目录结构比较简单，具体的根据实际需求划分目录。
安装相关依赖包
这里我们用到了三个依赖包：
express：基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。
body-parser：可用于解析json/表单数据。
获取数据我们本地用jquery封装的ajax
安装命令:
npm install express body-parser --save
或 yarn add express body-parser
配置server.js
引入项目依赖并设置监听端口
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.listen(3000,()=>console.log("server on http://localhost:3000"))
此时我们在控制台执行 node server.js
控制台输出server on http://localhost:3000表示服务启动成功了。
上述操作正常的话我们接下来让页面输出一些内容，我们添加一下代码：
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.get("/",(req, res) => {
res.send("Hello World!");
})
app.listen(3000,()=>console.log("server on http://localhost:3000"))
这时我们重新启动我们的服务在浏览器输入 http://localhost:3000显示如下
说明我们的代码生效了。
有了上面的基础我们进入今天的主题，配置node跨域
没配置跨域之前我们先写个简单的接口在本地测试一下是否可用，如下代码我们写一个/api/user的接口
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());//用来解析json数据
app.use(bodyParser.urlencoded({extended: true}));//用来解析表单数据
app.get("/api/user",(req, res)=>{
const user = {
name: "job",
age: 20
}
res.send({code: 200, data: user})
})
app.listen(3000,() => console.log("server on http://localhost:3000"))
src/index.html
<body>
用户名：<span class="userName"></span>
<p>年龄：<span class="userAge"></span></p>
<script src="js/jquery.min.js"></script>
<script>
$.ajax({
url: "http://localhost:3000/api/user",
type: "GET",
dataType: "json",
success: function(data){
if(data.code == 200){
$(".userName").html(data.data.name);
$(".userAge").html(data.data.age);
}
}
})
</script>
</body>
然后重启我们的服务，直接打开我们的index.html页面发现请求跨域
接下来我们开始配置node的跨域代码如下
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}))
const allowCrossDomain = function(req, res, next){
res.header('Access-Control-Allow-Origin', '*');//自定义中间件，设置跨域需要的响应头。
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');//允许任何方法
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token'); //允许任何类型
next();//一定要添加这段代码，不然程序无法正常往下执行
}
app.use(allowCrossDomain);
app.get("/api/user",(req, res)=>{
const user = {
name: "job",
age: 20
}
res.send({code: 200, data: user})
})
app.listen(3000,() => console.log("server on http://localhost:3000"))
代码都作了注释，大家可参考
此时我们重启我们的服务，打开index.html结果如下
发现页面正常展示了，到此我们的跨域配置就结束了，需要注意的是每次修改了我们的server.js都需要通过 node server.js 命令重启服务。
网友评论