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

  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. Ubuntu 安装MTP驱动访问安卓设备（转载）

    转自:http://www.ipython.me/ubuntu/how-to-connect-kindle-with-ubuntu.html 1.安装MTP工具集: mr_liu@i-it:~$ su ...

  2. Git学习二

    一.在工作区和暂存区退回 在工作区: $git checkout -- filename 在暂存区: $git reset HEAD filename $git checkout -- filenam ...

  3. bzoj 1606: [Usaco2008 Dec]Hay For Sale 购买干草【01背包】

    在洛谷上被卡常了一个点! 就是裸的01背包咯 为啥我在刷水题啊 #include<iostream> #include<cstdio> #include<algorith ...

  4. [Swift通天遁地]一、超级工具-(1)动态标签：给UILabel文字中的Flag和url添加点击事件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. Qt对象模型之一：信号和槽

    一.信号和槽机制概述 信号槽是 Qt 框架引以为豪的机制之一.所谓信号槽,实际就是观察者模式.当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal).这种发出是没有目 ...

  6. Poj 2112 Optimal Milking (多重匹配+传递闭包+二分)

    题目链接: Poj 2112 Optimal Milking 题目描述: 有k个挤奶机,c头牛,每台挤奶机每天最多可以给m头奶牛挤奶.挤奶机编号从1到k,奶牛编号从k+1到k+c,给出(k+c)*(k ...

  7. Monkey Banana Problem LightOJ - 1004

    Monkey Banana Problem LightOJ - 1004 错误记录: 1.数组开小2.每组数据数组没有清空 #include<cstdio> #include<cst ...

  8. 转如何升级oracle版本？（11.2.0.1至11.2.0.4）

    dbua from 11.2,0.2 to 11.2.0.4 need 2hours 升级结果: 步骤名             日志文件名       状态 升级前操作   PreUpgrade.l ...

  9. javaScript关闭浏览器 (不弹出提示框)

    一段JavaScript脚本程序,负责关闭窗口,如果网页不是通过脚本程序打开的(window.open()),调用window.close()脚本关闭窗口前,必须先将window.opener对象置为 ...

  10. 为OS X开发者准备的15个超棒应用

    几乎所有的开发人员在他们日常的开发工作中都有他们自己不可缺少的工具或实用程序集. 这些工具中的每一个都提供了特定的功能,大多数开发者都已经将他们集成到了其工作流程中. 使用这些工具或实用程序不单单只是 ...