express post方法设置了响应头依然报跨域错误

最新推荐文章于 2024-07-14 18:55:56 发布

三蚊

最新推荐文章于 2024-07-14 18:55:56 发布

阅读量717

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/venus_j/article/details/119810731

版权

Vue学习专栏收录该内容

4 篇文章 1 订阅

订阅专栏

博客探讨了在使用axios发送POST请求到Express服务器时遇到的跨域问题。尽管在Express中设置了允许所有来源的跨域请求，但由于预检请求(CORS)机制，浏览器仍会发送OPTIONS请求导致跨域错误。解决方案是正确配置Express以处理预检请求。

摘要由CSDN通过智能技术生成

页面用axios.create()调请求 localhost：8080

 axios.create({
    url:'login',
    method:'post',
    data:user,//{username:"admin",password:"admin"}
    headers:{
      'Content-Type':'application/json'
    },
    baseURL:"http://localhost:3000/api",
    timeout: 2000
  })

express用post接受处理请求 localhost:3000

在app.post里面设置res.header是不起作用的，浏览器控制台还是会报跨域的错误，

原因是post请求实际上发起的是options请求。这一点可在network哪里看到服务器发起了两次请求。如果option无法通过，则不会发真的请求，而是报错，

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

//post请求不能直接获取参数
app.use(bodyParser.json({ limit: '1mb'}))//body-parser 解析json格式数据
app.use(bodyParser.urlencoded({ extended: true}))

app.all('*',function(req,res,next){
    res.header('Access-Control-Allow-Origin', '*');//的允许所有域名的端口请求（跨域解决）
   res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
  })

app.post('/api/login',(req,res)=>{
    //在post里面设置允许跨域不起作用
  //res.header('Access-Control-Allow-Headers', 'Content-Type');
  //res.header('Access-Control-Allow-Origin', '*');
  let {username,password} = req.body;
  console.log(req.body);
  let user = userList.some(user => {
    return user.username==username && user.password==password
  })
  if (user) {
    let token = jwt.sign({username:username,password:password},"cube-ui",{expiresIn:'12h'});
    res.json({code:0,data:{msg:"登录成功",user:user,token:token}})
  } else {
    res.json({code:1,msg:"登录失败"})
  }
  
})