1.原始方式
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Authorization,X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method' )
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PATCH, PUT, DELETE')
res.header('Allow', 'GET, POST, PATCH, OPTIONS, PUT, DELETE')
next();
});
2.express使用cors来解决跨域问题
2.1 js主程序
// 1.使用npm安装cors npm -i cors
// 2.引入cors模块
// 3.在路由之前配置cors中间件解决跨域问题
const express = require('express')
const router = require('./route')
const qs = require("querystring")
const app = express()
const cors = require("cors")
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use(cors())
app.use(router)
app.listen(80,()=>{
console.log("http://127.0.0.1")
})
2.2 路由模块
const express = require("express")
const router = express.Router()
router.get('/',(req,res)=>{
console.log(req.query);
res.send(req.query)
})
router.post('/',(req,res)=>{
console.log(req.body);
res.send(req.body)
})
module.exports = router
2.3 前端使用axios发起get，post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="axios.js"></script>
</head>
<body>
<button id="btnGet">get请求</button>
<button id="btnPost">post请求</button>
<script>
let btnGet = document.querySelector("#btnGet")
let btnPost = document.querySelector("#btnPost")
btnGet.addEventListener("click",()=>{
axios.get("http://127.0.0.1",{
params:{
id:123,
name:'hello'
}
}).then(res=>{
console.log(res.data);
});
})
btnPost.addEventListener("click",()=>{[
axios.post('http://127.0.0.1', {id:1,name:"laobai"})
.then(function(ret){
console.log(ret.data)
})
]})
</script>
</body>
</html>
评论 (0)