一、你需要准备的知识储备

  1. 运用node的包管理工具npm 安装插件、中间件的基本知识；

    2.express框架的一些基础知识，知道如何建立一个小的服务器；晓得如何快速的搭建一个express框架小应用；

    3.还需要一些前端的基础小知识，html\css\js\jquery

    4。最重要的一点就是知道怎么产生的跨域，要是不知道怎么产生的跨域，如何知道需要去破解它呢？

二、实例的代码分析

场景分析，我本地的域名为http.localhost:8080，我要请求的地址是<http.****.com>

html页面代码（express生成的public文件夹下的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>Document</title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

    <form action="" method='GET'>

        <input type="submit">

        <input type="hidden" name='__method' value='search'>

    </form>

</body>

<script>

    $.ajax({

        url: '/api/message/alllist/new',

        type: 'get',

        dataType: 'json',

        success: function(res) {

            console.log(res)

        }

    })

</script>

</html>

app.js页面代码(express生成的app.js）



var createError = require('http-errors');

var express = require('express');

var path = require('path');

var cookieParser = require('cookie-parser');

var logger = require('morgan');

var indexRouter = require('./routes/index');

var usersRouter = require('./routes/users');

var app = express();

var proxyMiddleware = require('http-proxy-middleware');

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

// app.use(function(req, res, next) {

//     console.log(req.query.__method, req.method);

//     req.old = req.method;

//     req.method = req.query.__method;

//     next();

// })

app.use(logger('dev'));

app.use(express.json());

app.use(express.urlencoded({

    extended: false

}));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

app.middleware = [

    proxyMiddleware(['/api/message/alllist/*'], {

        target: 'http://***.com',//将要代理的地址

        changeOrigin: true

    })

];

app.use(app.middleware);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

    next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

    // set locals, only providing error in development

    res.locals.message = err.message;

    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page

    res.status(err.status || 500);

    res.render('error');

});

module.exports = app;

目录图片

自己大白话解释：

首先要安装http-proxy-middleware ，npm install http-proxy-middleware --save-dev,然后再页面中引用。

proxyMiddleware(['/api/message/alllist/*'], {

    target: 'http://***.com',

    changeOrigin: true

})

];```将服务器代理到这个地址，并将匹配路由/api/message/alllist/*

启动服务器，可以用node的本身的命令 node app.js 或者可以用expess框架中的命令 npm start (package.json中)；这时候的终端显示为

最后在浏览器中输入地址 ：localhost:3100，注意这里面的地址是你自己启动的服务器的地址以及端口；我的端口号是3100。

访问过后查看终端变化，显示请求成功

至此你请求的数据就是你代理的服务器上的数据，这就是我对用node +express+http-proxy-middleware进行跨域请求得见解，如果有大神觉得有不对的地方欢迎指正，以及欢迎志同道合的同志一起研究技术。

运用 node + express + http-proxy-middleware 实现前端代理跨域的 详细实例哦的更多相关文章

  1. 前端笔记之Vue（五）TodoList实战&拆分store&跨域&练习代理跨域

    一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...

  2. django 前端请求跨域问题解决

    django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...

  3. [转] js前端解决跨域问题的8种方案（最新最全）

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  4. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  5. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  6. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  7. web添加第三方应用，前端解决跨域问题的8种方案

    应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...

  8. Webpack代理proxy配置，解决本地跨域调试问题，同时允许绑定host域名调试

    Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...

  9. Grails项目开发——前端请求跨域问题

    Grails项目开发--前端请求跨域问题 最近做项目采用前后端分离的思想,使用Grails作为后台开发Restful API供前端调用. 在项目开发的过程中,遇到前端没办法通过ajax访问到后台接口的 ...

随机推荐

  1. bzoj 1610: [Usaco2008 Feb]Line连线游戏【瞎搞】

    阴沟翻船.jpg 居然忘了除0的情况 枚举两两之间的线,把斜率装起来排个序去个重就好了 真是水的一晚上呢 #include<iostream> #include<cstdio> ...

  2. .NET CORE技术路线图

    分享一张图.来自微信.不做解释.

  3. [AHOI2007]密码箱

    Description 在一次偶然的情况下,小可可得到了一个密码箱,听说里面藏着一份古代流传下来的藏宝图,只要能破解密码就能打开箱子,而箱子背面刻着的古代图标,就是对密码的提示.经过艰苦的破译,小可可 ...

  4. Poj 1743 Musical Theme (后缀数组+二分)

    题目链接: Poj  1743 Musical Theme 题目描述: 给出一串数字(数字区间在[1,88]),要在这串数字中找出一个主题,满足: 1:主题长度大于等于5. 2:主题在文本串中重复出现 ...

  5. JAVA大数处理(BigInteger,BigDecimal)

    原文链接 Java中有两个类BigInteger和BigDecimal分别表示大整数类和大浮点数类. 这两个类都在java.math.*包中,因此每次必须在开头处引用该包. Ⅰ基本函数: 1.valu ...

  6. clock()函数的返回值精度问题

    clock()函数返回值为1毫秒,就是0.001秒.clock函数功 能: 返回处理器调用某个进程或函数所花费的时间.用 法: clock_t clock(void);说明:clock_t其实就是lo ...

  7. 暴力 ZOJ 1403 Safecracker

    题目传送门 /* 暴力:纯暴力,在家水水 */ #include <cstdio> #include <cstring> #include <algorithm> ...

  8. egrep命令的实现 分类： 编译原理 2014-06-01 23:41 329人阅读 评论(0) 收藏

    本程序实现了egrep命令,首先将正则表达式转换为NFA,并实现模拟NFA的算法. 本程序使用flex实现词法分析,bison实现语法分析 若给定的一行字符串中存在一个字串能被该NFA接受,则输出整行 ...

  9. SQL SELECT DISTINCT 语句 用法

    SQL SELECT DISTINCT 语句 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出不同(distinct)的值. 关键词 DISTINCT 用于返回唯一不同的值. 语法 ...

  10. 421 Maximum XOR of Two Numbers in an Array 数组中两个数的最大异或值

    给定一个非空数组,数组中元素为 a0, a1, a2, … , an-1,其中 0 ≤ ai < 231 .找到 ai 和aj 最大的异或 (XOR) 运算结果,其中0 ≤ i,  j < ...