说说如何利用 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 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 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中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
react路由配置方式详解
2017/08/07 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python对列表排序的方法实例分析
2015/05/16 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python3 深浅copy对比详解
2019/08/12 Python
Django学习之文件上传与下载
2019/10/06 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
学校教研活动总结
2014/07/02 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP