运用 node + express + http-proxy-middleware 实现前端代理跨域的 详细实例哦
一、你需要准备的知识储备
- 运用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 实现前端代理跨域的 详细实例哦的更多相关文章
- 前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域
一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...
- django 前端请求跨域问题解决
django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...
- [转] js前端解决跨域问题的8种方案(最新最全)
1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- web添加第三方应用,前端解决跨域问题的8种方案
应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...
- Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试
Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...
- Grails项目开发——前端请求跨域问题
Grails项目开发--前端请求跨域问题 最近做项目采用前后端分离的思想,使用Grails作为后台开发Restful API供前端调用. 在项目开发的过程中,遇到前端没办法通过ajax访问到后台接口的 ...
随机推荐
- SqlSugar解决SQLite访问的问题:Unable to load DLL 'SQLite.Interop.dll'
SqlSugar用的版本是4.5.9.5,访问SQLite数据提示错误.在本机调试一时没有什么错误,把代码发布到服务器上以后刚开始运行没有问题,一段时间后报错. English Message : C ...
- 在Centos下安装httpd、php、Mysql并配置(转载)
转自:http://club.jledu.gov.cn/?action-viewspace-itemid-299020 1.安装Apahce, PHP, Mysql, 以及php连接mysql库组件. ...
- E20180225-hm-xa
variation n. 变化,变动; 变异,演变; 变奏曲; 变量; auxiliary adj. 辅助的 subscript adj. 下标的,写在下方的,脚注的; n. 下标,脚注,下角数 ...
- HDU2604:Queuing(矩阵快速幂+递推)
传送门 题意 长为len的字符串只由'f','m'构成,有2^len种情况,问在其中不包含'fmf','fff'的字符串有多少个,此处将队列换成字符串 分析 矩阵快速幂写的比较崩,手生了,多练! 用f ...
- bzoj 1834: [ZJOI2010]network 网络扩容【最大流+最小费用最大流】
第一问直接跑最大流即可.建图的时候按照费用流建,费用为0. 对于第二问,在第一问dinic剩下的残量网络上建图,对原图的每条边(i,j),建(i,j,inf,cij),表示可以用c的花费增广这条路.然 ...
- Spring Boot之配置文件值注入(@ConfigurationProperties)
前言:Spring Boot配置文件值的注入有两种方式,分别是 @ConfigurationProperties @Value 这里我们使用第一种 首先我们创建一个application.yml文件, ...
- Luogu P1991 无线通讯网 【最小生成树】
题目描述 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫星电话线路的哨所(两边都 ...
- springboot整合elasticsearch出错:java.lang.NoClassDefFoundError: org/elasticsearch/plugins/NetworkPlugin
Caused by: java.lang.NoClassDefFoundError: org/elasticsearch/plugins/NetworkPlugin at java.lang.Clas ...
- 在myeclipse中maven遇见的问题
An internal error occurred during: "Retrieving archetypes:". Java heap space 表示你的myeclipse ...
- HTML/XML转义字符对照表
HTML/XML转义字符对照表 HTML/XML转义字符对照表包含符号.数学符号.希腊字母 .重要的国际标志.ISO 8859-1 (Latin-1)字符集.特殊符号等. 1.特殊字符转义表 字符 十 ...