说说如何利用 Node.js 代理解决跨域问题


Posted in Javascript onApril 22, 2019

前后端分离,经常会出现跨域访问被限制的问题。

跨域访问限制是服务端出于安全考虑的限制行为。即只有同域或者指定域的请求,才能访问。这样还可以防止图片被盗链。服务端(比如 Node.js)可以通过代理,来解决这一问题。

1 安装 request 库

npm install request --save-dev

2 配置

我们以知乎日报为例,配置两个代理。一个代理内容,另一个代理图片。

在项目根目录,配置 proxy.js :

//代理
const http = require('http');
const request = require('request');

const hostIp = '127.0.0.1';
const apiPort = 8070;
const imgPort = 8071;

//创建 API 代理服务
const apiServer = http.createServer((req, res) => {
  console.log('[apiServer]req.url='+req.url);
  const url = 'http://news-at.zhihu.com/story' + req.url;
  console.log('[apiServer]url='+url);
  const options = {
    url: url
  };

  function callback(error, response, body) {
    if (!error && response.statusCode === 200) {
      //编码类型
      res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
      //允许跨域
      res.setHeader('Access-Control-Allow-Origin', '*');
      //返回代理内容
      res.end(body);
    }
  }

  request.get(options, callback);
});

//监听 API 端口
apiServer.listen(apiPort, hostIp, () => {
  console.log('代理接口,运行于 http://' + hostIp + ':' + apiPort + '/');
});

//创建图片代理服务
const imgServer = http.createServer((req, res) => {
  const url = 'https://pic2.zhimg.com/' +req.url.split('/img/')[1];
  console.log('[imgServer]url=' + url);
  const options = {
    url: url,
    encoding: null
  };

  function callback(error, response, body) {
    if (!error && response.statusCode === 200) {
      const contentType = response.headers['content-type'];
      res.setHeader('Content-Type', contentType);
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.end(body);
    }
  }

  request.get(options, callback);


});

//监听图片端口
imgServer.listen(imgPort, hostIp, () => {
  console.log('代理图片,运行于 http://' + hostIp + ':' + imgPort + '/')
});

代理的关键点是在响应头添加 Access-Control-Allow-Origin 为 *,表示允许所有域进行访问。

代理前地址 代理后地址
https://pic2.zhimg.com/v2-bb0a0282fd989bddaa245af4de9dcc45.jpg http://127.0.0.1:8071/img/v2-bb0a0282fd989bddaa245af4de9dcc45.jpg
http://news-at.zhihu.com/story/9710345 http://127.0.0.1:8070/9710345

3. 运行

执行:

node proxy.js

 运行结果:

代理接口,运行于 http://127.0.0.1:8070/代理图片,运行于http://127.0.0.1:8071/

打开浏览器,输入代理后的地址,就可以正常访问啦O(∩_∩)O哈哈~

代理内容:

说说如何利用 Node.js 代理解决跨域问题

代理图片:

说说如何利用 Node.js 代理解决跨域问题

以上所述是小编给大家介绍的Node.js代理解决跨域问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
详解Vue中使用Axios拦截器
Apr 22 #Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 #Javascript
vue 项目build错误异常的解决方法
Apr 22 #Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 #Javascript
今天,小程序正式支持 SVG
Apr 20 #Javascript
详解Vue中组件的缓存
Apr 20 #Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 #Javascript
You might like
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python查找第k小元素代码分享
2013/12/18 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python 里最强的地图绘制神器
2021/03/01 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
幼儿园标语大全
2014/06/19 职场文书
节电标语大全
2014/06/23 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2015年电教工作总结
2015/05/26 职场文书
长江七号观后感
2015/06/11 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
使用Apache Camel表达REST服务的方法
2022/06/10 Servers