怎么设置跨域请求头

在跨域请求中，需要对响应头进行特殊设置，才能使得浏览器正常处理跨域请求。常用的方法有以下两种：

1. 使用服务器端设置响应头

在服务器端，可以通过设置响应头的方式来允许跨域请求。例如，在 Node.js 中，可以使用 express 框架来设置响应头，示例如下：

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

app.use((req, res, next) => {
  // 允许跨域请求的域名
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  // 允许客户端发送的请求头
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 处理跨域请求的路由
app.get('/api/list', (req, res) => {
  // 处理请求并返回数据
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上述代码中，通过设置响应头中的 `Access-Control-Allow-Origin` 字段，允许来自任何域名的跨域请求。同时，通过 `Access-Control-Allow-Methods` 和 `Access-Control-Allow-Headers` 字段，分别允许 GET、POST、OPTIONS 请求和 Content-Type 请求头。

2. 使用代理服务器

另外一种方法是使用代理服务器来转发请求，使得浏览器认为请求是同源的。在这种情况下，客户端的请求会先发送到代理服务器，然后由代理服务器向目标服务器发送请求并返回响应结果。例如，在 Vue.js 中可以使用 webpack-dev-server 来实现代理服务器，示例如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在上述代码中，使用 `proxy` 字段来配置代理服务器，将所有以 `/api` 开头的请求转发到 `localhost:3000` 上。通过 `changeOrigin` 字段来允许跨域请求，同时使用 `pathRewrite` 字段将 `/api` 前缀去除，以便于在服务器端处理请求。