vue3+axios在响应头中添加Access-Control-Allow-Origin字段

Vue3中使用axios处理跨域时，通常需要在后端服务器配置`Access-Control-Allow-Origin`响应头来允许特定的客户端访问。在发送预检请求（preflight request）时，如果`Access-Control-Allow-Headers`不包含`content-type`，会报如你所描述的错误。以下是设置这个字段的基本步骤：

1. **后端设置**:
- 在服务器端处理API请求时，检查`OPTIONS`请求（预检请求）。这通常是`XMLHttpRequest`在实际`GET`, `POST`等请求之前发送的一个HTTP头请求，用于检查服务器是否支持跨域。

   // Node.js后端示例（Express）
   app.all('/api/*', function(req, res, next) {
     if (req.method === 'OPTIONS') {
       res.header('Access-Control-Allow-Origin', req.headers.origin);
       res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
       res.header('Access-Control-Allow-Headers', 'content-type, authorization');
       res.status(204).send();
     } else {
       next();
     }
   });

这里设置了`Access-Control-Allow-Origin`为请求头中的`Origin`字段，以及允许的请求方法和`content-type`头部。

2. **前端配置**:
- 在Vue3中使用axios时，确保你设置`withCredentials`属性为`true`，表示请求携带身份凭证（如cookies）。

   import axios from 'axios';
   const service = axios.create({
     baseURL: 'http://pre.api.jmxy.mockuai.com/', // API的基础URL
     withCredentials: true, // 允许跨域携带cookie
     headers: {
       'Content-Type': 'application/json' // 根据实际需要设置请求头
     }
   });

   // 使用service实例发起请求
   service.get('/your-endpoint')
     .then(response => console.log(response.data))
     .catch(error => console.error(error));

确保你的后端已经正确处理了这些配置，否则前端仍然会收到跨域错误。如果你的服务器配置为不允许`*`作为`Access-Control-Allow-Origin`，那么你需要将`http://pre.promotion.jmxy.moc...`替换为你实际应用的域名。