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端,不要浪费时间在其它地方排查。

Post Comment

提交失败,请检查是表单否已填写完整!