Sveltekit应用程序发送明文文件而不是页面上的HTML文件,从而导致文件下载

发布于 2025-02-11 14:34:26 字数 1089 浏览 1 评论 0原文

我正在使用Sveltekit构建一个投资组合项目,并使用无服务器Funcitons在Vercel上托管。从路由到无服务器函数实现,我将使用Sveltekit进行所有操作。我遇到的问题是,当我使用npm运行dev进行本地测试时,一切都可以正常工作,即使我使用npm run build build在本地构建应用程序并使用测试进行测试。 npm运行预览,但是将其推到/dashboard并刷新并刷新后,它将文件作为八位钟文件而不是html文件发送,引起文件浏览器下载它。

如果您在网站上注册,然后将其重定向到/dashboard一切正常,但是如果您在那里刷新浏览器后,它将下载文件。我注意到.vercel_build_output文件夹内部有一个index.html文件和一个没有文件扩展名的仪表板文件。

我到目前为止尝试过的内容:

  • 更新了使用Adapter-netlify在Netlify上托管的所有NPM软件包
  • ,以查看它是否是Vercel的特定问题,它可以执行相同的操作只需为所有页面发送一个禁用的txt文件
  • 禁用预处理即可。 没有明文仪表板文件
  • .vercel_build_output文件夹中 因为这是唯一具有负载功能的页面。由于无法获取用户数据,因此它
  • 损坏

页面

sveltekit是一个很年轻的工具,所以整个问题可能是一个错误,但我不喜欢t足够了解,能够判断我是个傻瓜还是一个错误!我已经被这个问题殴打了几天,因此非常感谢任何帮助!

I'm building a portfolio project using SvelteKit and hosting it on Vercel using serverless funcitons. I'm using SvelteKit for everything, from routing to serverless function implementation. The problem that I'm having is that everything works 100% when I test locally using npm run dev and even when I build the app locally using npm run build and test using npm run preview, but after it gets pushed to Vercel if you go to /dashboard and refresh it sends the file as a octet-stream file instead of an HTML file, causing the browser to download it.

If you register with the site and then get redirected to /dashboard everything works fine, but once you're there if you refresh the browser it will download a file. I've noticed that inside of the .vercel_build_output folder there is an index.html file and a dashboard file with no file extension.

What I've tried so far:

  • Updated all NPM packages
  • Hosted on Netlify with adapter-netlify to see if it was a Vercel specific problem, it does the same thing but instead of an octet-stream file it just sends a txt file
  • Disabled prerendering for all pages. There is no plaintext dashboard file in the .vercel_build_output folder anymore but on refresh it shows a page that says [Object object] instead of sending a HTML/octet-stream file
  • Removed load function inside dashboard __layout.svelte since it's the only page with a load function. It breaks the page since it can't fetch user data but it still sends a file on refresh
  • Changed filesystem structure inside of the project to try to get it to build correctly

Links:

SvelteKit is a pretty young tool so this whole issue could be a bug but I don't know enough to be able to tell if I'm being a goofball or if it's a bug! I've been getting beat up by this problem for a few days so any help is VERY appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

走走停停 2025-02-18 14:34:26

您的hooks.js handle()方法检查路径是否以“仪表板”开头,并试图返回303重定向响应。但是,响应对象缺少'重定向'主体。如果添加了身体,它将不再导致[对象对象]

这绝对是预先登录期间发生的事情,但是我不确定为什么在注册后会发生这种情况。 Authtoken可能会定义。 Auth/Cookie代码中也许还有另一个错误。 (啊,也许Prerendered 仪表板正在从静态文件夹中加载文本文件。)

Your hooks.js handle() method checks if the path starts with "dashboard" and tries to return a 303 redirect response. However, the Response object is missing the 'Redirect' body. If the body is added it no longer results in [Object object].

This is definitely what is happening during prerendering, but I'm not sure why this would happen after registering. authToken would presumably be defined. Perhaps there is another bug in the auth/cookie code. (Ah, maybe the prerendered dashboard text file was being loaded from the static folder.)

迷乱花海 2025-02-18 14:34:26

我的问题最终有两个原因:

  1. 我的authtoken cookie由于某种原因而在刷新上的samesite属性没有被发送到服务器端,我假设这可能与我的无服务器环境有关工作。

  2. 左撇子是正确的,问题与我的hooks.js文件有关,即使用户被授权,这与重定向有关,这与重定向有关。如果我在句柄功能中评论了代码,并且只有以下代码正常重定向:

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  return response;
}

解决方案:
我将samesite设置为authtoken cookie上的任何一个,而不是使用钩子文件来保护以/dashboard开始的端点,我只是单独保护它们。我将使用hooks.js文件进行更多测试,以查看是否可以找出真正的原因。

更新:
左侧是右100%,如果Authtoken不确定,我只是在响应对象的内部没有一个主体,但是如果有错误解析JWT,我确实包含了一个,这是我检查的,并且没有验证。以前的响应对象也有一个身体。此外,正如左撇子思想一样,我的代码中有一个错误,导致Authtoken被不确定,并导致部署时发送错误的响应对象,但不是本地的。

更新:
我的手柄功能中没有错误,导致Authtoken cookie没有被解析。我查看了构建日志,Sveltekit正在预先将/dashboard API重定向到/,以便/dashboard始终将其重定向到/不运行句柄功能。只有当我的hooks.js文件在手柄功能内部的有条件重定向时,才会发生这种情况。即使我将/src/routes/dashboard/index.svelte中的false设置为false,false npm run build构建始终会从句柄函数中重定向。 “解决方案”是在svelte.config.js中禁用整个应用程序的预处理。这是构建日志的相关部分:

  Prerendering
  303 /dashboard -> /
  200 /

最终更新:
Sveltekit通过您的代码爬网,以确定到Prerender的路线。 Sveltekit正在预定我的重定向,因为当它爬上我的代码时,它将被重定向,因为它没有authtoken cookie。我将此代码添加到hooks.js内部的句柄功能的顶部,并且一切都按预期在开发和产品中工作!

import { prerendering } from '$app/env';

// prevents SvelteKit from prerendering the following redirect during build
if (prerendering) return await resolve(event);

My issue ended up having two causes:

  1. My AuthToken cookie was not getting sent to the server side because of the SameSite attribute on refresh for some reason, I'm assuming this may have something to do with the serverless environment I'm working off of.

  2. Leftium was right, the issue had something to do with my hooks.js file and it was something to do with the redirects even though the user shouldn't be hitting them if they are authorized. If I commented out the code in my handle function and only had the following code it would redirect normally:

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  return response;
}

The solution:
I set SameSite to none on my authToken cookie and instead of using a hooks.js file to protect my endpoints that start with /dashboard I just protect each of them individually. I will do some more testing with the hooks.js file to see if I can find out the real cause.

Update:
Leftium was 100% right, I just didn't include a body inside of a Response object in my handle function if the authToken was undefined but I did include one if there was an error parsing the JWT which is what I checked and did not verify that the previous Response object had a body as well. Furthermore, just as Leftium thought, there IS a bug inside of my code in the handle function that is causing the authToken to be undefined and cause the faulty Response object to be sent when deployed but not locally.

Update:
There was not a bug in my handle function causing the authToken cookie to not be parsed. I looked into the build log and SvelteKit was prerendering the /dashboard api redirect to / so that /dashboard would always redirect to / without running the handle function. This only happened if my hooks.js file had the conditional redirect inside of the handle function. Even if I set prerendering to false in the /src/routes/dashboard/index.svelte to false npm run build would always prerender the redirect from the handle function. The "solution" was to disable prerendering for the whole app in svelte.config.js. Here is the relevant section of the build log:

  Prerendering
  303 /dashboard -> /
  200 /

Final Update:
SvelteKit crawls through your code to determine what routes to prerender. SvelteKit was prerendering my redirect because when it crawled my code it would be redirected since it did not have an authToken cookie. I added this code to the top of my handle function inside of hooks.js and everything is working as expected in dev and prod!

import { prerendering } from '$app/env';

// prevents SvelteKit from prerendering the following redirect during build
if (prerendering) return await resolve(event);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文