http-proxy-middleware解决跨域

最新推荐文章于 2024-06-12 15:18:08 发布

2014Team

最新推荐文章于 2024-06-12 15:18:08 发布

阅读量9.4k

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/u012965203/article/details/84594653

版权

Js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍如何使用Node.js和Express框架搭建一个带有http-proxy-middleware的代理服务器，实现前端项目的静态资源托管和跨域请求转发。通过具体步骤指导读者完成环境搭建、配置和启动服务。

摘要由CSDN通过智能技术生成

最近一个玩的很好的前端工程师要用到，他很用心的去研究了下，个人感觉还是蛮不错的，所以记录下。

1、安装node.js

2、创建文件夹（demo文件夹）安装express服务器及http-proxy-middleware代理中间件

进入demo文件夹，cmd窗口执行以下命令

此刻我们需要执行命令：

npm init

创建package.json文件，系统会提示相关配置，也可以使用命令：

npm init -y

再执行命令

npm install --save-dev http-proxy-middleware express

3、在（demo文件夹）新建server.js文件以及创建index文件夹（存放静态资源）

//引入express框架
let express = require('express')
let app = express()
//引入跨域中间件
//let proxy = require('http-proxy-middleware');
let { proxy } = require('http-proxy-middleware');

 //这段程序的作用是将我们的前端项目设置成静态资源
app.use(express.static("./index"))

//这里要注意"^/" 是匹配的路由,它会将匹配的路由进行转发，没匹配到的就不会转发。
app.use('/', proxy({
	//目标后端服务地址
    target: 'http://ysl.by1983.com/',
    pathRewrite: {
      '^/' : ''
    },
    changeOrigin: true
}))

app.listen(8081)
console.log('server is running!')

proxy({...}) - 匹配任意路径，所有的请求都会被代理。
proxy('/', {...})-匹配任意路径，所有的请求都会被代理。
proxy('/api', {...})-匹配所有以/api开始的路径。

其中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 = "/AjaxData.aspx?Action=loadindexnews";
		$.ajax({
     		url: url,
			type:"GET",
			dataType:"json",
			async:false,
	  	    success: function(data){
			console.info(data)
	  
	  }});
  
  }
  </script>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

4、启动server.js

打开cmd窗口执行命令