如何解决localhost下fetch请求Klarna API的CORS错误与401问题

第一步：先纠正代码里的基础错误 #

• 你在前端请求头里加的所有Access-Control-*开头的配置都是完全无效的。这类响应头只能由被请求的服务端在返回响应时设置，前端发请求时携带这类头，不仅不能绕过CORS校验，还会触发额外的跨域预检，提高被拦截的概率。
• 你的Basic认证代码存在语法错误：var auth = 'Basic ' + btoa(username:password); 这行代码直接运行就会触发JS语法报错，btoa()方法需要接收完整的字符串参数，正确写法是var auth = 'Basic ' + btoa(${username}:${password})，要把用户名和密码拼接成完整字符串再编码。
• 尝试mode: 'no-cors'的操作也没有实际意义：no-cors模式下浏览器会静默删除你手动设置的自定义请求头（比如Authorization、Content-Type），最终发出去的是格式为text/plain的简单请求，根本过不了Klarna的接口校验，同时这个模式下你也无法读取接口返回的内容。

第二步：定位两个核心报错的根本原因 #

• 为什么预检请求返回401？浏览器发起跨域预检（OPTIONS请求）的时候，不会携带你自定义设置的Authorization请求头，只会带上当前的来源地址信息。Klarna的服务端收到没有认证凭证的OPTIONS预检请求，自然会返回401未授权——这个401根本不是你业务接口的凭证配错了。Postman能正常请求，是因为Postman不会触发CORS预检流程，直接带凭证调用正式接口，自然能拿到响应。
• 为什么装了Chrome的CORS允许插件还是报错？这类插件只能帮你过滤掉响应中缺失CORS头的报错，但它改变不了“预检请求被Klarna返回401状态码”的事实。CORS规则明确要求，预检请求的响应必须是200/204的OK状态，浏览器才会继续放行正式请求，只要返回401，哪怕插件伪造了CORS响应头，浏览器也会直接拦截。

第三步：可落地的本地测试方案 #

• 不要直接从浏览器前端调用Klarna的第三方API。所有第三方服务的鉴权请求，都应该通过你自己的CodeIgniter后端做代理转发：前端把需要提交的业务参数发给你本地的CI后端，由后端拼接好Basic认证凭证，服务端直接请求Klarna的接口，拿到返回结果后再转回给前端。这种方式下前端和后端是同源的，根本不存在跨域问题，同时也避免了把Klarna的API密钥暴露在前端代码里的安全风险。
• 如果需要快速本地调试接口，可以直接在本地开发环境配置请求代理，把前端指向Klarna的请求路径，通过本地开发代理转发到目标接口，代理层帮你补全CORS响应头、携带认证凭证，不需要修改业务代码就能正常完成测试。

补充说明：CORS是浏览器的同源策略安全限制，不是服务端的接口限制，你永远无法绕过浏览器的安全规则从前端直接调用不允许跨域的第三方服务，所有的跨域解决方案本质都是通过服务端代理的方式规避浏览器的校验流程。

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