说说如何利用 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遍历checkbox介绍
Feb 21 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
Nest.js 授权验证的方法示例
Feb 22 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
python中的sort方法使用详解
2014/07/25 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python plotly绘制直方图实例详解
2019/07/22 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
群众路线个人对照检查材料
2014/09/23 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
初中团委工作总结
2015/08/13 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书