本地localhost用Fetch JS带Basic认证请求URL遇CORS错误及响应问题

我尝试调用采用Basic认证的API端点 GET https://example.com/data，最初的调用代码如下：

const credentials = btoa("username:password");
fetch(fullUrl, {
    method: callMethod,
    credentials: "include",
    headers: new Headers({
        'Authorization': `Basic ${credentials}`,
    }),
}).then(function (response) {
    console.log(response)
}).catch(error => console.log("There is an error:", error))

执行后触发CORS错误：

Access to fetch at 'https://example.com/data' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

按照提示添加mode: 'no-cors'后代码变为：

const credentials = btoa("username:password");
fetch(fullUrl, {
    mode:  'no-cors',
    method: callMethod,
    credentials: "include",
    headers: new Headers({
        'Authorization': `Basic ${credentials}`,
    }),
}).then(function (response) {
    console.log(response)
}).catch(error => console.log("There is an error:", error))

此时浏览器会弹出用户名密码输入框，且控制台返回不透明响应，即便网络面板显示200状态和预期结果：

Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}

核心需求：通过代码传入凭证消除CORS错误，无需弹窗；若必须用弹窗，需获取真实响应内容。

根本解决方案：配置API服务器的CORS规则 #

前端无法绕过浏览器的CORS安全限制，最彻底的解决方式是让API服务器添加以下响应头：

• Access-Control-Allow-Origin: http://localhost:8080（生产环境替换为实际前端域名，带凭证时不能用*）
• Access-Control-Allow-Headers: Authorization（允许自定义的Authorization头通过预检）
• Access-Control-Allow-Credentials: true（允许携带凭证）
• 确保服务器正确处理OPTIONS预检请求，返回上述头信息

配置完成后，最初的前端代码即可正常运行：无需添加no-cors，代码传入的凭证会生效，不会弹出登录框，且能正常读取响应内容。

临时方案：使用代理规避CORS（无法修改服务器时） #

如果无法修改API服务器配置，可通过代理转发请求：

本地开发环境（以Vue为例） #

在vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

前端请求地址改为/api/data，代理会自动转发到https://example.com/data，避免CORS限制，原认证代码可正常使用。

生产环境（以Nginx为例） #

在Nginx配置中添加反向代理规则：

location /data {
  proxy_pass https://example.com/data;
  proxy_set_header Authorization $http_authorization;
}

前端请求自身域名下的/data，由Nginx转发到目标API，规避CORS问题。

为什么no-cors模式会导致弹窗和不透明响应？ #

• no-cors模式下，浏览器会屏蔽自定义的Authorization请求头，导致代码传入的凭证未被发送到服务器，服务器因此弹出登录框要求手动输入。
• 出于安全限制，no-cors模式返回的响应是不透明响应，前端无法读取响应内容、状态码等信息，即便网络请求实际成功。

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