vue-resource报跨域错误

问题报错:
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':'*'});
  });
});
发布了106 篇原创文章 · 获赞 46 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/zlq_CSDN/article/details/90953716