首页 > 其他分享> 文章详细

使用http-proxy-middleware中间件代理请求实现跨域方法

2022-03-29 19:04:49 阅读：190 来源： 互联网

标签：http middleware express 中间件 js api test app

转

https://blog.csdn.net/TL18382950497/article/details/109037141

https://www.freesion.com/article/21491374832/

https://www.cnblogs.com/ldlx-mars/p/7816316.html

https://www.tqwba.com/x_d/jishu/313511.html

跨域

跨域是对前端而言的，是浏览器为了网络安全而作出的网络请求限制
当请求不在当前host:port时，属于跨域请求，会被浏览器阻止
当项目属于前后端分离的项目时，前端代码和后端代码通常不运行在同一个端口，甚至不在同一台主机上。为了使前端能够请求后端提供的接口，需要使用跨域技术

http-proxy-middleware

使用方法
– 创建文件夹demo, 运行npm init -y 初始化node项目(首先确保计算机中安装了node.js)
– 安装依赖 npm install http-proxy-middleware，此时版本为1.0.6
– 这里，我们通过express来使用该中间件，安装expressnpm install express
– 在demo文件夹下创建server.js文件作为代理使用
– 在demo文件夹下创建api.js文件作为接口使用
– 在demo文件夹下创建index文件夹作为前端项目。
如图：

– 在server.js中使用如下代码

const express = require('express')
const { createProxyMiddleware  } = require('http-proxy-middleware')
let app = express()

// 对/api开头请求进行转发处理
app.use('/api', createProxyMiddleware({ 
	// 转发到5000端口
	target: 'http://localhost:5000',
	// 转发时重写路径
	pathRewrite: {'^/api' : ''},
	changeOrigin: true }));

// 将前端项目所在文件夹设置为静态资源
app.use('/', express.static('./index', {
	  cacheControl: false,
	  etag: false,
	  lastModified: false
}))

app.listen(3000)

– 在api.js中使用如下代码

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

app.get('/test', (req,res)=>{
	res.send('this is a test message');	
})
// 监听在另一个端口
app.listen(5000);

– 在index文件夹中创建index.html，并使用如下代码

<!DOCTYPE html>
<html>
  <head>
    <title>index.html</title>
		<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  
  <script>
  
  // 加载完成后就发起请求
  $(function(){
	test()
  })
  function test(){
  		// 请求的路径	
		var url = "/api/test";
		$.ajax({
     		url: url,
			type:"GET",
			dataType:"json",
});
  
  }
  </script>
  
  <body>
    This is my HTML page1321. <br>
  </body>
</html>

– 在demo文件夹下打开两个命令行窗口，分别运行node server.js、node api.js

– 打开浏览器，访问localhost:3000，并查看调试工具的network选项卡
使用http-proxy-middleware中间件代理请求实现跨域方法
可以看到，我们从3000端口请求到了5000端口提供的接口，成功实现了跨域
切换到Headers面板，看到Request URL为http://localhost:3000/api/test。

再看看我们使用代理时定义的转发条件

app.use('/api', createProxyMiddleware({ 
	target: 'http://localhost:5000',
	pathRewrite: {'^/api' : ''},
	changeOrigin: true }
	));

首先，因为请求路径是以/api开头，会被转发，转发时路径重写，/api被替换为空，就成了/test，并且被转发到5000端口，因此访问的路径就成了http://localhost:5000/test，正好是我们在api.js中定义的接口。

标签：http,middleware,express,中间件,js,api,test,app
来源： https://www.cnblogs.com/dhjy123/p/16073314.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用http-proxy-middleware中间件代理请求实现跨域方法

跨域

http-proxy-middleware