前情
后端给的接口在浏览器中可以拿到返回值,由于浏览器的同源策略,在项目中使用ajax报跨域。
同源策略这里不多说,具体说一下怎么解决。
用nodeJs做代理
1. 初始化项目
创建一个空文件夹,在文件夹下
npm init
所有选项默认即可
2. 启动一个express项目
安装express
npm i express -s
在根目录下创建index.js文件
// index.js
const express = require('express')
const app = express()
const port = 5000
app.get('/', (req, res) => {
return res.send('Hello')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
启动项目
node index.js
查看效果
浏览器中出现刚才send的内容,表示启动成功
3. 托管静态文件
项目根目录下创建public文件夹,放入自己的静态文件
// index.js
app.use(express.static('public'))
<!--public/testAjax.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>123</div>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "https://www.xxxx.cn/api/apk/app/abc.json",
type: "GET",
success: (data) => {
console.log(data);
}
})
</script>
</html>
此时页面正常显示,但是接口是跨域的
4. 处理跨域
安装http-proxy-middleware
npm i http-proxy-middleware -s
使用中间件
// index.js
const {createProxyMiddleware} = require('http-proxy-middleware')
app.use('/api', createProxyMiddleware({
target: 'https://www.xxxx.cn',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}));
修改ajax
$.ajax({
url: "/api/apk/app/abc.json",
type: "GET",
success: (data) => {
console.log(data);
}
})
重启node,查看效果
接口成功返回数据,代理成功
最终代码
// index.js
const express = require('express')
const {createProxyMiddleware} = require('http-proxy-middleware')
const app = express()
const port = 5000
app.get('/', (req, res) => {
return res.send('Hello')
})
app.use('/api', createProxyMiddleware({
target: 'https://www.xxxx.cn',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}));
app.use(express.static('public'))
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
<!--public/testAjax.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>123</div>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "/api/apk/app/abc.json",
type: "GET",
success: (data) => {
console.log(data);
}
})
</script>
</html>
结束
具体写法官方文档中都写的很清楚,需要拓展功能可查阅文档
快速通道:
express官网
http-proxy-middleware