如何在「简单请求」中强制触发预检请求？跨域API访问问题求解

一、不添加自定义头强制触发预检的方法 #

根据CORS规范，除自定义请求头外，以下两种方式可触发OPTIONS预检请求，但需服务器端支持：

• 使用非简单请求的HTTP方法+特定Content-Type：
  将原本的GET请求改为POST（需确认服务器支持POST访问该资源），同时设置Content-Type: application/json（该类型不属于简单请求允许的Content-Type范围）。浏览器会自动发送OPTIONS预检请求，若服务器预检响应包含正确CORS头，后续POST请求即可正常获取响应。
  示例代码（Fetch API）：

  fetch('https://目标服务器地址/api/资源路径', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({}) // 无参数时可传空对象
  })
  

  注意：若服务器仅允许GET方法访问该资源，此方法无效。

• 发送带凭据的请求（局限性较大）：
  设置请求的withCredentials: true（XHR或Fetch均可），但仅当服务器预检响应包含Access-Control-Allow-Credentials: true且Access-Control-Allow-Origin不是通配符*时才可能生效。由于你的场景中简单请求本身无CORS头，即使触发预检，后续带凭据请求仍可能因响应缺少CORS头被浏览器拦截，优先级较低。

二、其他可行的跨域访问方式 #

若上述触发预检的方法无效，以下是更可靠的替代方案：

• 搭建代理服务器：
  部署一个后端服务（如Node.js、Nginx等），前端请求该代理服务，由代理服务发起对目标服务器的请求（服务器端请求不受浏览器CORS限制），再将结果返回给前端。这是通用性最强的解决方案，不受目标服务器CORS配置限制。
  示例Node.js代理代码（使用express）：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  
  app.get('/proxy-api', async (req, res) => {
    try {
      const targetUrl = 'https://目标服务器地址/api/资源路径' + req.url;
      const response = await axios.get(targetUrl);
      res.send(response.data);
    } catch (err) {
      res.status(err.response?.status || 500).send(err.response?.data || '请求失败');
    }
  });
  
  app.listen(3000, () => console.log('代理服务运行在3000端口'));
  

  前端只需请求http://localhost:3000/proxy-api即可。

• JSONP（若服务器支持）：
  如果目标API支持JSONP格式（返回内容为回调函数名(数据)的形式），可通过动态创建<script>标签请求。这种方式不受CORS限制，但仅支持GET请求，且需要服务器配合返回JSONP格式响应。
  示例代码：

  function handleJsonpData(data) {
    // 处理返回的数据
    console.log(data);
  }
  
  const script = document.createElement('script');
  script.src = 'https://目标服务器地址/api/资源路径?callback=handleJsonpData';
  document.body.appendChild(script);
  

• iframe+postMessage（可行性低）：
  若目标服务器的资源页面允许嵌入iframe，且页面提供数据传递接口，可通过iframe加载页面后，用postMessage在父页面和iframe间传递数据。但绝大多数纯API接口不支持这种方式，仅适用于特定场景。

内容的提问来源于stack exchange，提问作者hl037_