Vue使用Axios发起GET请求报CORS错误：无Access-Control-Allow-Origin头如何解决

问题根源 #

你携带Authorization自定义头后，请求触发了浏览器的CORS预检机制：浏览器会先发送OPTIONS方法的预检请求，该请求不会携带任何自定义头（包括你配置的Authorization token）。如果服务端的身份校验中间件拦截了没有携带token的OPTIONS请求，会直接返回错误响应，不会带上CORS所需的响应头，就会出现你看到的报错。

解决步骤 #

• 第一步：服务端放行所有OPTIONS请求的身份校验
  所有HTTP方法为OPTIONS的请求不需要走token验证逻辑，直接返回正确的CORS响应头即可。
• 第二步：校验CORS响应头配置规则
  因为你前端配置了withCredentials: true，服务端返回的CORS头必须满足两个要求：
  • Access-Control-Allow-Origin不能设为通配符*，必须和请求来源完全匹配，你配置的http://localhost:8080注意不要多写末尾斜杠、大小写不要出错
  • 必须明确返回Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin头，不能缺失
• 第三步（可选）：确认Authorization头格式符合服务端要求
  多数服务端的token校验要求格式为Authorization: Bearer 你的实际token值，如果漏写Bearer 前缀也会导致校验失败，优先排查前两个预检相关的问题后再检查该项。

服务端配置示例（匹配你现有PHP风格配置） #

// 放在token校验逻辑之前
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: http://localhost:8080');
    header('Access-Control-Allow-Methods: POST,GET,OPTIONS');
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 3600');
    header('Access-Control-Allow-Headers: Content-Type,Authorization');
    exit();
}
// 后续走正常的token校验逻辑

内容的提问来源于stack exchange，提问作者Emzyn pvt ltd