Node中使用http-proxy-middleware实现代理跨域的方法步骤

目录
  • 1.安装代理模块
  • 2.配置代理

1.安装代理模块

cnpm i http-proxy-middleware -S

2.配置代理

const express = require('express');
const app = express();

/* 代理配置 start */
const proxy = require('http-proxy-middleware'); //引入代理模块
const proxyOptions = {
    target: 'http://127.0.0.1:9999', //后端服务器地址
    changeOrigin: true //处理跨域
};
const exampleProxy = proxy('/api/*', proxyOptions); //api前缀的请求都走代理
app.use(exampleProxy);
/* 代理配置 end */

const hostName = '127.0.0.1';
const port = 8080;

app.get('/', function(req, res) {

    const html =
    `<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title>Document</title>
     </head>
     <body>
         <button id="btn1">请求服务器接口1</button>
         <button id="btn2">请求服务器接口2</button>
         <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
         <script>
             document.getElementById('btn1').addEventListener(
                 'click',
                 () => {
                     axios.get('/api/hello', {
                         params: {
                             key: 'hello'
                         }
                     });
                 },
                 false
             );

             document.getElementById('btn2').addEventListener(
                 'click',
                 () => {
                     axios.get('/api/word', {
                         params: {
                             key: 'word'
                         }
                     });
                 },
                 false
             );
         </script>
     </body>
 </html>`;

    res.setHeader('Content-Type', 'text/html');
    res.send(html);
});

app.listen(port, hostName, function() {

    console.log(`服务器运行在http://${hostName}:${port}`);

});

到此这篇关于Node中使用http-proxy-middleware实现代理跨域的方法步骤的文章就介绍到这了,更多相关Node http-proxy-middleware代理跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • node跨域转发 express+http-proxy-middleware的使用

    最近公司在尝试前后端分离的开发模式,现有应用是java语言,要从中间拆除一个小的模块来做前后端分离,工具上还是jquery,只不过是流程和分工上的分离,不想在前端的机器上搭建一套java环境,就根据教程搭了一下转发,让本地可以接上开发服务器联调. 为什么要使用node代理转发? 我们要实现前后端分离,然后前端不在自己的电脑上安装tomcat,这时候,我们通过用node搭建服务器,然后转发我们的请求.例如:自己本地是localhost:3000,我们需要访问http://www.example.c

  • Node中使用http-proxy-middleware实现代理跨域的方法步骤

    目录 1.安装代理模块 2.配置代理 1.安装代理模块 cnpm i http-proxy-middleware -S 2.配置代理 const express = require('express'); const app = express(); /* 代理配置 start */ const proxy = require('http-proxy-middleware'); //引入代理模块 const proxyOptions = { target: 'http://127.0.0.1:9

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    目录 1.首先axios不支持vue.use()方式声明使用 2.小小的提一下vue cli脚手架 3.axios发送get post请求问题 4.axios拦截器的使用 1.首先axios不支持vue.use()方式声明使用 看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 2.小小的

  • vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    目录 1.首先axios不支持vue.use()方式声明使用 2.小小的提一下vue cli脚手架 3.axios发送get post请求问题 4.axios拦截器的使用 1.首先axios不支持vue.use()方式声明使用 看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 2.小小的

  • vue中前端代理跨域问题实例总结

    vue中前端代理跨域问题实例总结

    目录 前言 第一 第二 第三 代码 总结 前言 这几天在学习vue进行前后端交互时出现了跨域问题,也是经历查文章查文档和自己实践总结才最终解决.这篇文章就对此进行总结,以防忘记,同时也希望能对正在经历该问题困扰的同学们有所帮助.注意:这里讲解的是vue2.x版本的方法! 第一 首先我们需要先确定我们所使用的接口名,我这里使用的自己Java后端的接口和python后端的接口 http://localhost:8081/articles/findArticlePagehttp://127.0.0.1

  • vue 设置proxyTable参数进行代理跨域

    什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了

  • Node.js配合node-http-proxy解决本地开发ajax跨域问题

    Node.js配合node-http-proxy解决本地开发ajax跨域问题

    情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题.  用到的技术:

  • Python爬虫代理池搭建的方法步骤

    一.为什么要搭建爬虫代理池 在众多的网站防爬措施中,有一种是根据ip的访问频率进行限制,即在某一时间段内,当某个ip的访问次数达到一定的阀值时,该ip就会被拉黑.在一段时间内禁止访问. 应对的方法有两种: 1. 降低爬虫的爬取频率,避免IP被限制访问,缺点显而易见:会大大降低爬取的效率. 2. 搭建一个IP代理池,使用不同的IP轮流进行爬取. 二.搭建思路 1.从代理网站(如:西刺代理.快代理.云代理.无忧代理)爬取代理IP: 2.验证代理IP的可用性(使用代理IP去请求指定URL,根据响应验证

  • node后端与Vue前端跨域处理方法详解

    目录 node.js后端跨域解决方案 前端vue项目 前端axios请求 node.js后端跨域解决方案 先看后端的入口文件: app.js const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors') const expressJWT = require('express-jwt') const app = express(); const

  • 在Ubuntu中安装VSCode并配置C/C++开发环境的方法步骤

    第一步,打开Ubuntu Software下载VSCode.(so easy) 官网地址:https://code.visualstudio.com/docs/?dv=linux64_deb 然后使用 sudo dpkg -i  xxx.deb解压即可 第二步,如果你的电脑中没有gcc,g++,gdb的话,可以通过以下代码获得. sudo apt-get update //访问源列表,并读取软件列表 sudo apt-get install gcc sudo apt-get install g+

随机推荐