问题报错:
Access to XMLHttpRequest at ‘http://127.0.0.1:3000/api/getStuList’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
问题解析:
前端服务器fetch.js请求后端服务器api报跨域问题
前端服务器:63342,后端服务器:3000,KOA2
由于前端请求的header字段未在服务器端运行,导致请求跨域报错。
解决方案:
在后端response返回的header允许前端header的请求
js代码:
router.all('*', (ctx, next) => {
// 允许来自所有域名请求
ctx.set('Access-Control-Allow-Origin', '*');
// 是否允许发送Cookie,ture为运行
ctx.set('Access-Control-Allow-Credentials', true);
// 设置所允许的HTTP请求方法
ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE');
// 服务器支持的所有头信息字段,多个字段用逗号分隔
ctx.set('Access-Control-Allow-Headers', 'x-requested-with, x-ui-request, lang');
next();
});
服务器端的处理:
//获取学生列表信息
router.get("/api/getStuList",(req,res,next)=>{
let sqlStr = "select * from students";
// 允许来自所有域名请求 解决跨域问题
res.set('Access-Control-Allow-Origin', '*');
conn.query(sqlStr,function (err,results) {
if(err) return res.json({err_code:1,message:"数据获取失败!"});
// res.send(results);
res.json({success_code:200,message:results,'Access-Control-Allow-Origin':'*'});
});
});