Access to XMLHttpRequest at……问题出现时怎么办

后端设置

确保在后端正确配置 cors 中间件，允许跨域请求并支持凭据传递。

假设你使用的是 express.js，可以这样设置：

const express = require('express');
const cors = require('cors');
const app = express();

// cors 配置
const corsoptions = {
  origin: 'http://localhost:5173', // 允许的前端地址
  credentials: true, // 允许发送 cookie
};

app.use(cors(corsoptions));

// 示例路由
app.post('/api/teachers/login', (req, res) => {
  const token = tokenencode(data); // 生成 jwt
  res.cookie('token', token, { 
    maxage: 30 * 24 * 60 * 60 * 1000, // 30 天
    httponly: true, // 仅通过 http 访问，防止 xss 攻击
    secure: true, // 仅在 https 下发送
    samesite: 'none' // 允许跨站点发送 cookie
  });
  res.json({ message: 'login success' });
});

app.listen(8080, () => {
  console.log('server is running on port 8080');
});

前端请求设置

确保在前端的请求中包含 credentials: 'include'，这样可以发送和接收 cookie。

fetch('http://localhost:8080/api/teachers/login', {
  method: 'post',
  headers: {
    'content-type': 'application/json'
  },
  credentials: 'include', // 允许发送和接收 cookie
  body: json.stringify({
    // 你的请求数据
    name: this.name,
    sex: this.sex,
    school: this.school,
    classname: this.classname, // 修改为classname
    phone: this.phone,
    password: this.password,
    subject: this.array[this.index],
    ismaster: this.ismaster
  })
})
.then(response => response.json())
.then(data => {
  console.log('后端响应结果:', data);
})
.catch(error => console.error('请求失败:', error));

其他注意事项

1. 确保后端和前端的域名、端口号正确：确保在 cors 设置中的 origin 与前端请求的地址一致。

2. 检查预检请求（options 请求）：有时浏览器会先发送一个预检请求（options 请求）来检查服务器是否允许实际请求。如果预检请求失败，实际请求就会被阻止。确保后端正确处理 options 请求。
    

   app.options('/api/teachers/login', cors(corsoptions)); // 处理预检请求
   

3. https 配置：如果你在开发环境中使用 https，需要确保 secure 设置为 true。在本地开发环境中，可以暂时设置为 false 进行调试。

通过这些配置，可以解决 cors 问题，并允许前端正确接收来自后端的 cookie