基于cors解决接口跨域问题
1.下载cors中间件
npm install cors
2.导入cors中间件
const cors = require('cors')
3.配置cors中间件
app.use(cors())
注意：cors中间件的配置必须在路由配置之前
完整案例
- home.html代码
<body>
<button class="btn" onclick="get()">get请求</button>
<button class="btn" onclick="post()">post请求</button>
<script>
function get() {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/get',
data: {
name: 'aaa',
age: 18,
sex: 'girl'
},
success: function(res) {
console.log(res);
}
})
}
function post() {
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/post',
data: {
name: 'bbb',
age: 20,
sex: 'boy'
},
success: function(res) {
console.log(res);
}
})
}
</script>
</body>
- index.js页面代码
const express = require('express')
const app = express()
const cors = require('cors')
const router = require('./router')
const bodyParser = require('body-parser')
app.use(bodyParser.json()); //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({
extended: false}));
app.use(cors()) //配置跨域
app.use(router) //路由配置
app.listen(80, () => {
console.log('服务器启动成功');
})
- router.js页面代码
const express = require('express')
const router = express.Router()
router.get('/get', (req, res) => {
const query = req.query
console.log(query);
res.send({
status: 0,
msg: '请求成功',
data: query
})
})
router.post('/post', (req, res) => {
const body = req.body
console.log(body);
res.send({
status: 0,
msg: '请求成功',
data: body
})
})
module.exports = router
运行结果
