Express Cookie被Chrome阻止

我正在尝试设置一个简单的注册/登录表单，前面有vuejs，服务器上有ExpressJS，使用passport库设置本地和社交媒体startegy。 但当我使用本地策略登录时，我似乎无法将cookies传递到前端。 另外，当我登录谷歌时，我会在前端得到cookie，但它不会随下一个API调用一起发送，但这是另一个问题的主题

我被这搞糊涂了，所以我做了一个简单的项目，只是为了接收和发送cookies，它可以工作。这是后端：

//headers in app.js
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// index file
router.get('/cookie', function (req, res, next) {
  res.cookie("token", "mytoken");
  res.send("cookie sent");
});

router.get('/info', function (req, res, next) {
  cookies = req.cookies;
  console.log(cookies);
  res.cookie("token", "mytoken");
  res.send("cookie sent");
});

下面是我调用API的前端方法：

methods: {
    async getCookie() {
      await axios.get("http://localhost:3000/cookie",{withCredentials:true}).then((response) => {
        console.log(response);
      }).catch((e) => {
        console.log(e);
      });
    },
    async sendCookie() {
      await axios.get("http://localhost:3000/info",{withCredentials:true}).then((response) => {
        console.log(response);
      }).catch((e) => {
        console.log(e);
      });
    }
  }

这样，我就可以在请求中传递cookie并接收它

现在在我真正的项目中，我在后端有这个

//Headers just like the other project
 
router.post('/users/login', function (req, res, next) {
  passport.authenticate('local', { session: false }, function (err, user, info) {
    if (err) { return next(err); }
    if (user) {
      res.cookie('token', 'mytoken');
      return res.json({ user: user.toAuthJSON() });
    } else {
      return res.status(401).json(info);
    }
  })(req, res, next);
});

前端呼叫：

// Service file to call the api

axios.defaults.baseURL = "http://127.0.0.1:3000/api/";
axios.defaults.withCredentials = true;

const ApiService = {

  get(resource, slug = "") {
    return axios.get(`${resource}/${slug}`).catch(error => {
      throw new Error(`ApiService ${error}`);
    });
  },
...
}
export default ApiService;

//actual call in authetification module file

[LOGIN](context, credentials) {
    return new Promise(resolve => {
      ApiService.post("users/login", { email: credentials.email, password: credentials.password })
        .then(({ data }) => {
          context.commit(SET_AUTH, data.user);
          resolve(data);
        })
        .catch(({ response }) => {
          context.commit(SET_ERROR, response.data.errors);
        });
    });
  },
//

请求有效，但cookie被Chrome阻止：

我看不出我的两个项目有什么不同，在最后一个项目中会在Chrome上触发这个警告

---

编辑：在我原来的post-axios.defaults.baseURL中没有设置为我的实际值。

上次更新chrome浏览器后，我也开始出现此错误。要解决此问题，请转到chrome://flags 并在默认cookies下禁用SameSite和禁用启用删除SameSite=None cookies。这会解决你的问题。我想另一种解决方法是在创建会话时更改cookie设置（samesite属性）。

找到解决方案，多亏了。我将axios.defaults.baseURL设置为“http://127.0.0.1:3000/api/“但是localhost和127.0.0.1是不可互换的，被认为是两个不同的域。我切换到axios.defaults.baseURL=”http://localhost:3000/api“它解决了这个问题。

您是否在这两种情况下都使用

localhost:8080

和

localhost:3000

？看起来您来自代码，但如果是这种情况，cookie域将匹配，并且错误消息似乎暗示它们不匹配。您是对的。我对我的代码做了一些修改，使之更简洁。axios.defaults.baseURL的值位于使用127.0.0.1而不是localhost的配置文件中。这就是问题所在。显然，localhost和127.0.0.1是不能互换的。