轉
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選項卡
可以看到，我們從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中定義的接口。