1.使用node中间件解决跨域
-
新建文件夹，npm init初始化目录后，安装
axios、express以及http-proxy-middleware -
目录结构如下：
-
02-中间件代理跨域 ├─ index.html //页面 ├─ package-lock.json ├─ package.json ├─ proxyServer.js //代理服务器 └─ server.js //自己的服务器
-
下面来看下index.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>
<script src='/axios/dist/axios.js'></script>
<h2>中间件代理跨域</h2>
<script>
axios.defaults.baseURL = 'http://localhost:8080';
axios.get('/user')
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
</script>
</body>
</html>
接着来看下自己的服务器server.js:
const express = require('express');
const fs = require('fs');
const app = express();
// 中间件方法
// app.use(express.static('node_modules')) 设置node_modules为静态资源目录
// 将来在模板中如果使用了src属性 http://localhost:3000/node_modules
app.use(express.static('node_modules'))
app.get('/',(req,res)=>{
fs.readFile('./index.html',(err,data)=>{
if(err){
res.statusCode = 500;
res.end('500 Interval Serval Error！');
}
res.statusCode = 200;
res.setHeader('Content-Type','text/html');
res.end(data);
})
})
app.get('/user',(req,res)=>{
res.json({name:'凡尔赛青铜徐四'})
})
//监听3001端口
app.listen(3001);
直接然后nodemon启动server.js后看控制台出现跨域的信息。
接着再来看下代理服务器的内容proxyServer.js：
编写完了下面的内容需要通过nodemon运行的哈：nodemon proxyServer.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
// 代理服务器操作
//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
// http-proxy-middleware
// 中间件 筛子 每个请求来之后 都会转发到 http://localhost:3001 后端服务器
app.use('/', createProxyMiddleware({ target: 'http://localhost:3001', changeOrigin: true }));
app.listen(8080);
- 代理服务器这里监听的8080端口，然后将原本通过http://locallhost:8080/user发送的请求，转而通过代理服务器发送，从而解决了跨域的问题。
