说说如何利用 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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
vue路由教程之静态路由
Sep 03 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
详解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中常见数据类型的汇总分享
2014/01/06 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
移动端界面的适配
2017/01/11 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
VUE重点问题总结
2018/03/19 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python定义一个函数的方法
2020/06/15 Python
怎么快速自学python
2020/06/22 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
行政助理岗位职责
2013/11/10 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS