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

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

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

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

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

二、实例的代码分析

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

html页面代码（express生成的public文件夹下的index.html)-----稍后会有图片展示目录关系。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  10. </head>
  12. <body>
  13.     <form action="" method='GET'>
  14.         <input type="submit">
  15.         <input type="hidden" name='__method' value='search'>
  16.     </form>
  18. </body>
  19. <script>
  20.     $.ajax({
  21.         url: '/api/message/alllist/new',
  22.         type: 'get',
  23.         dataType: 'json',
  24.         success: function(res) {
  25.             console.log(res)
  26.         }
  27.     })
  28. </script>
  30. </html>

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


  2. var createError = require('http-errors');
  3. var express = require('express');
  4. var path = require('path');
  5. var cookieParser = require('cookie-parser');
  6. var logger = require('morgan');
  8. var indexRouter = require('./routes/index');
  9. var usersRouter = require('./routes/users');
  11. var app = express();
  12. var proxyMiddleware = require('http-proxy-middleware');
  14. // view engine setup
  15. app.set('views', path.join(__dirname, 'views'));
  16. app.set('view engine', 'ejs');
  18. // app.use(function(req, res, next) {
  19. //     console.log(req.query.__method, req.method);
  21. //     req.old = req.method;
  22. //     req.method = req.query.__method;
  23. //     next();
  24. // })
  25. app.use(logger('dev'));
  26. app.use(express.json());
  27. app.use(express.urlencoded({
  28.     extended: false
  29. }));
  30. app.use(cookieParser());
  31. app.use(express.static(path.join(__dirname, 'public')));
  33. app.middleware = [
  34.     proxyMiddleware(['/api/message/alllist/*'], {
  35.         target: 'http://***.com',//将要代理的地址
  36.         changeOrigin: true
  37.     })
  38. ];
  40. app.use(app.middleware);
  41. // catch 404 and forward to error handler
  42. app.use(function(req, res, next) {
  43.     next(createError(404));
  44. });
  46. // error handler
  47. app.use(function(err, req, res, next) {
  48.     // set locals, only providing error in development
  49.     res.locals.message = err.message;
  50.     res.locals.error = req.app.get('env') === 'development' ? err : {};
  52.     // render the error page
  53.     res.status(err.status || 500);
  54.     res.render('error');
  55. });
  57. module.exports = app;

目录图片

自己大白话解释：

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

  1. proxyMiddleware(['/api/message/alllist/*'], {
  2.     target: 'http://***.com',
  3.     changeOrigin: true
  4. })

];```将服务器代理到这个地址，并将匹配路由/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. 【WIP】Ruby JSON

    创建: 2018/03/22 以后有空补上 注: JSON.generate 参数只能是Obejct或者Array, 不可以是Hash https://docs.ruby-lang.org/ja/la ...

  2. Excel：一列是源值随机加减某随机值，变为另一列的数值

    1) 产生x1与x2之间整数随机数 =RANDBETWEEN(x1,x2),x1和x2为随机数区间 如果需要小数,可以乘以小数获得,Eg: =RANDBETWEEN(-5,5)*0.01,表示 -0. ...

  3. bzoj4580: [Usaco2016 Open]248(区间dp)

    4580: [Usaco2016 Open]248 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 255  Solved: 204[Submit][S ...

  4. 查找MySQL和 SQL sever data

    MySql SQL server

  5. javascript 冒泡与捕获的原理及操作实例

    所谓的javascript冒泡与捕获不是数据结构中的冒泡算法,而是javascript针对dom事件处理的先后顺序,所谓的先后顺序是指针对父标签与其嵌套子标签,如果父标签与嵌套子标签均有相同的事件时, ...

  6. taskkill帮助信息

    taskkill帮助信息: C:\Users\xusweeter>taskkill /? TASKKILL [/S system [/U username [/P [password]]]] { ...

  7. 198 House Robber 打家劫舍

    你是一个专业的强盗,计划抢劫沿街的房屋.每间房都藏有一定的现金,阻止你抢劫他们的唯一的制约因素就是相邻的房屋有保安系统连接,如果两间相邻的房屋在同一晚上被闯入,它会自动联系警方.给定一个代表每个房屋的 ...

  8. React Native for Android 学习

    前言 Facebook 在2015.9.15发布了 React Native for Android,把 JavaScript 开发技术扩展到了移动Android平台.基于React的React Na ...

  9. 单例模式及php实现

    单例模式: 单例模式(Singleton Pattern):单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法. 单例模式的要点有三个:一 ...

  10. hihocoder 神奇字符串

    思路: 暴力,模拟. 实现: #include <iostream> #include <algorithm> #include <cstdio> #include ...