> >

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