跨域解决方案 - node 转发
1. 定义
当用户需要请求数据时, 用户向前端服务器发送请求, 然后前端服务器接收请求之后向后端服务器发送请求接收数据, 然后转发给用户.
node 转发的本质其实和webpack devServer 的本质是一样的, 只不过node 转发一般由自己实现, webpack devServer 是一个定义好的配置.
node 转发跨域理解成为webpack devServer 原理的实现
2. 代理转发
参见:跨域解决方案 - webpack devServer.md
3. node 转发解决跨域问题
express(app.js)
const express = require('express')
const log = console.log.bind(console)
const app = express()
// cors 模块用来解决跨域问题,只要声明了 cor,就说明该服务器允许跨域的访问
// const cors = require('cors')
// app.use(cors())
app.get('/helloworld', (request, response) => {
log('触发了该事件')
response.send('hello')
})
app.get('/singlecors', (request, response) => {
response.set('Access-Control-Allow-Origin', '*')
response.send('hello')
})
app.get('/api/todos', (request, response) => {
response.send('request todos')
})
const main = () => {
let server = app.listen(2300, () => {
let host = server.address().address
let port = server.address().port
log(`应用实例,访问地址为 http://${host}:${port}`)
})
}
if (require.main === module) {
main()
}
node 转发代码
const http = require('http')
const https = require('https')
const fs = require('fs')
const url = require('url')
const express = require('express')
const bodyParser = require('body-parser')
const SERVER = require('./server.config').server
const log = console.log.bind(console)
const app = express()
app.use(express.static('proxy'))
app.use(bodyParser.json())
const clientByProtocol = (protocol) => {
if (protocol === 'http:') {
return http
} else {
return https
}
}
const httpOptions = (request) => {
let server = SERVER
// 把 server 网址解析成一个 url 对象, 方便发请求的时候使用
let o = url.parse(server)
log('o: ', o)
// 把浏览器发送的请求的 headers 全部添加到 options 中,
// 避免出现漏掉某些关键 headers(如 transfer-encoding, connection 等) 导致出 bug 的情况
let headers = Object.assign({}, request.headers)
// 组合成最终发送的请求格式
let options = Object.assign({}, {
headers: headers,
}, o)
options.method = request.method
// request.originalUrl 不仅包含 path, 还包含 query string
options.path = request.originalUrl
return options
}
// 当访问主页时, 返回对应的HTML 内容
app.get('/', (request, response) => {
log('here')
fs.readFile('index.html', 'utf8', (error, data) => {
response.set('Content-Type', 'text/html; charset=UTF-8')
response.send(data)
})
})
// 将服务器的响应转发至浏览器
const sendResponseToClient = (httpResponse, expressResponse) => {
// 有两个响应对象, 一个是 http 响应对象, 另一个是 express 响应对象
let r = httpResponse
let response = expressResponse
// 设置响应对象的状态码和头部字段
response.status(r.statusCode)
Object.entries(r.headers).forEach(([k, v]) => {
response.setHeader(k, v)
})
// 当接收到数据的时候触发 data 事件, 然后把数据发送给客户端
r.on('data', (chunk) => {
response.send(chunk)
})
// 数据发送完成时触发 end 事件, express 对象告诉客户端数据发送完毕
r.on('end', () => {
response.end()
})
// 往客户端发送数据的过程中出错
r.on('error', () => {
log('error to request')
})
}
// 将浏览器发送过来的请求转发至服务器
const sendRequestToServer = (request, response) => {
// 根据当前request 以及后端接口信息, 定义新的请求格式
let options = httpOptions(request)
// log('options: ', options)
// 根据协议来选择用 http 模块还是 https 模块发送
let client = clientByProtocol(options.protocol)
// 使用http/https 定义请求
let req = client.request(options, (res) => {
// 收到 server 传过来的响应后, 把这个响应发送给客户端(也就是浏览器)
sendResponseToClient(res, response)
})
// 监听 error 事件, 也就是往 server 发送请求的过程中发生错误会触发这个事件
req.on('error', (e) => {
log(`往 server(${request.url}) 发送请求报错`, e)
})
// 如果发送的请求方法不是 GET, 说明 request.body 有数据
// 此时也要把数据发给 server
if (options.method !== 'GET') {
let body = request.body
let chunk = JSON.stringify(body)
req.write(chunk)
}
// 完成发送请求
req.end()
}
// 拿到浏览器发送的以 /api/ 开头的请求, 这些请求表述数据请求, 需要转发至后端服务器
app.all('/api/*',(request, response) => {
sendRequestToServer(request, response)
})
const run = (port, host) => {
let server = app.listen(port, host, () => {
let address = server.address()
log(`listening ${address.address}, ${address.port}`)
})
}
if (require.main === module) {
let port = 3300
let host = 'localhost'
run(port, host)
}
4. 代码演示
- github 地址:https://github.com/ouleWorld/studyDemo/tree/master/codeDevelopDemo/crossOrigin
- 拉取整个项目, 然后将expressDemo/app.js 替换为上述app.js 文件, 并启动express 服务器
- 运行node Proxy项目
- 想浏览器中输入url: 127.0.0.1:3300
5. 参考地址
跨域解决方案 - node 转发的更多相关文章
- 常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
- 【Distributed】网站跨域解决方案
一.概述 1.1 什么是网站跨域 1.2 网站跨域报错案例 二.五种网站跨域解决方案 三.使用JSONP解决网站跨域[1] 3.1 前端代码 3.2 后端代码 四.使用设置响应头允许跨域[2] 4.1 ...
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- localStorage和cookie的跨域解决方案
原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...
- 跨域解决方案一:使用CORS实现跨域
跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...
- asp.net web api2.0 ajax跨域解决方案
asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种. 一,ASP.NET Web API支持JSONP,分两种 1, ...
- iframe跨域解决方案
公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面 ...
- JSON跨域解决方案收集
最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...
- Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1. 设置 document.domain为一致 推荐1 2. Apache 反向代理 推荐1 ...
随机推荐
- 环境篇:Superset
环境篇:Superset Superset 是什么? Apache Superset 是一个开源.现代.轻量的BI分析工具,能够对接多种数据源,拥有丰富的图表展示形式.支持自定义仪表盘,用户界面友好, ...
- 【Hadoop离线基础总结】MapReduce入门
MapReduce入门 Mapreduce思想 概述 MapReduce的思想核心是分而治之,适用于大量复杂的任务处理场景(大规模数据处理场景). 最主要的特点就是把一个大的问题,划分成很多小的子问题 ...
- PI/PO Token配置
接收方通道配置 因为本例中需要在访问业务接口时,获取某平台的TOKEN认证,并在调用业务接口时,将TOKEN一同传给某平台,但是不能放在请求参数中,而是放在HTTP的Headers 注意!是Heade ...
- 杂记---主要关于PHP导出excel表格学习
今天上午处理了一下WIN7系统的电脑前置话筒和耳机口无法使用的问题,主要现象是耳机插入后没声音,麦插入话筒说话对方也听不到,后置端口一切正常.刚开始判断肯定是设置的问题,于是用另一台电脑百度搜索“wi ...
- Linux 内核工作队列之work_struct 学习总结
前言 编写Linux驱动的时候对于work_struct的使用还是很普遍的,很早之前就在阅读驱动源码的时候就看到了它的踪影,根据其命名大概知道了它的具体作用,但是仍然不知所以,同时,伴随出现的还有de ...
- FPGA的“可编程”使你迷惑吗?
http://www.alteraforum.com.cn/showtopic-7791.aspx FPGA的“可编程”使你迷惑吗? 任何一个硬件工程师对FPGA都不会陌生,就好比C语言对于软件工 ...
- mac下charles使用
设置charles 电脑上一次性的工作 1 下载下面两个文件(这里版本自己定) a charles-proxy-4.1.4.dmg b charles4.1.4的副本.jar 2 进行charles ...
- vue v-for 渲染input 输入有问题 解决方案
v-for循环input标签的时候输入信息两个输入框一同显示输入信息 解决方案: <input :placeholder="items.title" v-model = &q ...
- 静态MAC地址配置案例
目录导航: 1.静态MAC地址简介 2.组网需求 3.配置思路 4.配置步骤 5.配置文件 1.静态MAC地址简介 返回目录导航 >MAC地址表项是交换机通过报文的源MAC地址学习过程而自动生成 ...
- ORACLE重做日志小结
1.Redo log特点 重做日志以磁盘I/O为主,将数据库操作记录到日志文件.(磁盘I\O性能有可能成为瓶颈) 每个实例只有一个活动的LGWR(log writer)进程,至少有两个日志组(logf ...