Sveltekit中FormData对象数据发送返回403错误的解决方法
花了半天时间,才解决掉这个问题,错误没有任何提示,在nginx的log中仅仅一个403的access请求,没有error。
运行环境:sveltekit + pm2 + nginx + cloudflare
具体问题反应很诡异:
1.其它基于json格式的数据发起的请求一切都正常
2.唯独使用了formData对象发起的请求就出错,如:
const payload = new FormData(); const res = await fetch(`/api/xxx`, { method: 'POST', body: payload });
在Api Endpoint中无法捕捉到任何数据,说明在前一层就被拦截了。
最终通过参数ORIGIN=https://xxx.com
设置为实际生产环境的地址,而不是代理地址http://localhost:xxxx
。
一些Sveltekit部署遇到的问题
1.无法提交POST请求,由于跨域导致的问题
adapter: adapter({ out: 'build', precompress: true, + csrf: { checkOrigin: false } })
该问题也有人说通过升级node v18至v20可以解决,无需添加上面的csrf参数。
2.由于请求localhost导致请求到IPV6地址导致出错
在nginx中统一使用proxy_pass http://127.0.0.1:xxxx;
而不是 http://localhost:xxxx
3.注意nginx中
proxy_set_header Connection upgrade;
会引起sveltekit的fetch failed错误。
总之,在服务端无反馈的情况下问题一定出在sveltekit
本身和nginx
端,不要浪费时间在其它地方排查。