nodejs之mock与跨域代理的三两事

emmm...好久没写博客了,都忘了该怎么开始。

那就先说下mockjs。因为一些原因,导致后台接口没有数据,那么我们就开始自己造数据,使用的是比较流行mockjs,根据文档就能简单的配置,然后开始愉快的玩耍了。(真香)

然后某天后台出数据了,又因为某些问题(跨域),导致我又没法愉快的玩耍,嗯,就是这样的,才有了今天这篇博客(口水话)。

使用的是nodejs做跨域代理,非常简单,先贴代码:

 1 var express = require(‘express‘);
 2 var router = express.Router();
 3 var http = require(‘http‘);
 4
 5 router.all(‘*‘, function(request, response, next) { //代理了所有请求
 6     var content = JSON.stringify(request.body); //转发原味的数据
 7     var options = {
 8         host: ‘example.com‘, //需要代理的域名或者是ip
 9         port: 80, //端口号
10         path: request.path, //路径
11         method: ‘POST‘, //请求代理的方法
12         headers: { //设置一些请求头之类的
13             ‘Content-Type‘: ‘application/json‘,
14             ‘Content-Length‘: content.length
15         }
16     };
17     //开始做代理转发数据
18     var req = http.request(options, function(res) {
19         var _data = ‘‘;
20         res.on(‘data‘, function(chunk) {
21             _data += chunk;
22         });
23         res.on(‘end‘, function() {
24             //请求完成之后让response对象返回json
25             response.json(JSON.parse(_data))
26         });
27     });
28     //这个write大概就是发送这个body,以chunk的形式 原文: https://nodejs.org/dist/latest-v10.x/docs/api/http.html response.write(chunk[, encoding][, callback])
29     req.write(content);
30     //这次代理结束
31     req.end();
32 });

下面说下为什么这样写,最开始是匹配的所有路由,即:

router.all(‘/path‘, function(request, response, next) {
    //do something
})

后来发现,这样其实太繁琐了,我有多少个接口我就要写多少个‘/path‘,然后我想到了一个*值,这样就匹配到了所有的path,前端发什么,我就代理什么,不管你有没有这个接口,没有当然就报错啦,所以才有上面我的path是request.path。(这里需要一个滑稽的表情)

好了,口水话太多,干货也就一点,还不知道下次更博是啥时候,有点小失落,不过到时候应该是小激动吧。

原文地址:https://www.cnblogs.com/xuejiangjun/p/10618355.html

时间: 2024-07-29 13:35:46

nodejs之mock与跨域代理的三两事的相关文章

axios FastMock 跨域 代理

发送请求: 实现:发送请求,获取数据. 原本想自己写服务,后来无意间找到FastMock这个东东,于是就有了下文... 首先我安装了axios,在fastmock注册好了并创建了一个接口,怎么搞自行百度. Q&A: Q:怎么请求到? A:当然是用axios了. 代码如下: <script> export default { name: 'HelloWorld', data () { return { user:'' } }, mounted () { console.log('加载..

React里配置接口跨域代理【亲测完美实现~】

这种问题当然离不了官网妈妈的支持:传送门 官网给了三种解决方案.前两种我就不赘述了(主要是因为我没用) 而官网的第三种推荐的方式: 1.安装依赖: $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 2.在“src”文件夹下新建“setupProxy.js”文件.并做官网推荐的配置- 理论上,在正确的路径下新建setupProxy.js完毕,你只需要把下边这段官网的代码抄过来就可以了

axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts 页面引入 import ECharts from 'vue-echarts' import ECharts from 'vue-echarts' import 'echarts/lib/chart/line' // 折线图 import "echarts/lib/component/title&q

为什么我的跨域 AJAX 发了两个请求?

为什么我的跨域 AJAX 发了两个请求? 转载自:http://todoit.me/ajax-preflight/ 最近在做一个 VUE 的项目的时候, 和后端的小伙伴对接口, 想方便开发, 于是要求后端的小伙伴在所有的接口都加上跨域的许可 (Access-Control-Allow-Origin) (后来事实证明这不是一个很好的解决方案, 因为 vue-cli 提供了 proxy-table 作为 AJAX请求的代理, 只需要配置一下就好, 编译上线也不要改动代码) however, 经过这次

jQuery 跨域访问的三种方式 No &#39;Access-Control-Allow-Origin&#39; header is present on the reque

问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1 Resource interpreted as Script but transferred

angularjs 控制器不能访问nodejs 3000端口,跨域访问

目前做的一个项目,前端采用的是angularjs,后端nodejs做服务器. 我尝试使用接下里的方式来发起对nodejs服务器的请求: <span style="font-family:SimHei;font-size:18px;"> $http.get('http://localhost:3000/') .success(function (data) { $scope.index = data; }) .error(function (data) { $scope.in

vue-cli配置跨域代理

现在使用vue大多使用了前后端分离模式,因此游览器经常显示跨域失败的信息,现在跨域的方式很多种,主要分两大类,ajax跨域,dom跨域,具体的方法就不例举啦. vue-cli作为一个强大的脚手架,内置了一个简单的配置型跨域方式 找到目录下的config文件下,index.js中dev配置对象中的proxyTable属性,这里是一个对象 下面对这个对象属性进行解析: proxyTable: { '/api':{ //这里的key就是axios的baseURL target: 'http://127

webpack自带的跨域代理配置

问题:开发过程中难免有跨域的问题. 解决:webpack代理的配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry:

跨域请求的三种解决

第一种:jsonp的方式 <?php header('Content-type: application/json'); //获取回调函数名 $jsoncallback = $_GET['jsoncallback']; //json数据 $json_data = '{"data":[{"did":"29","deptName":"\u8f6f\u4ef6\u90e8"}, {"did&quo