使用Axios向Fluidpay API发送POST请求遭拦截，CORS报错求助

为什么Postman正常，浏览器里Axios报错？ #

Postman这类工具不会触发浏览器的同源策略检查，直接发送请求就能拿到响应。但浏览器会对跨域请求做严格的CORS验证：当你用Axios在前端发跨域POST请求时，浏览器会先自动发送一个OPTIONS预检请求，用来确认服务器是否允许该跨域请求。如果服务器返回的响应里没有Access-Control-Allow-Origin头，或者返回了405（方法不允许），浏览器就会拦截后续的POST请求，抛出你看到的错误。

关于405状态码的说明 #

错误里的405表示服务器不允许当前请求方法（这里是OPTIONS预检请求）。大概率是Fluidpay的这个沙箱端点没有配置处理OPTIONS请求，或者该接口本身就不是设计给前端直接调用的。

公共API不一定允许所有域名访问 #

很多公共API（尤其是涉及敏感操作的，比如认证）不会默认允许所有域名跨域访问：

• 有些需要你在开发者后台添加CORS白名单，把你的前端域名加进去，服务器才会返回允许跨域的头。
• 还有些API是专门给服务器端调用的，不支持浏览器端直接请求（比如这个认证接口涉及用户名密码，前端直接传的话会有安全风险，容易泄露凭证）。

可行的解决办法 #

• 查API文档：先看Fluidpay的官方文档，确认这个token-auth端点是否支持浏览器端跨域调用，是否需要配置CORS白名单，或者请求格式有没有特殊要求。
• 后端中转请求：最安全也最通用的方案是在你的后端服务器中转请求：前端把用户名密码发给自己的后端，后端再调用Fluidpay的API，这样既避免了跨域问题，也不会在前端暴露敏感的认证凭证。
• 临时测试方案：如果只是本地测试，可以用浏览器CORS插件（比如CORS Everywhere）绕过检查，但这个方法绝对不能用于生产环境。
• 检查请求细节：确认你的Axios请求参数格式、Content-Type是否和API要求一致（比如有些API要求form-data而不是JSON，Postman可能自动适配了，但Axios默认是JSON）。

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