Sveltekit 代理 api 以避免 cors

Question

我实际上正在构建一个基本的 svelkit 应用程序。我需要获取天气 api 但无法获取我有 cors 错误：

我想我需要为 https://www.metaweather.com 设置一个代理，有什么办法可以用 svelte 工具包做到这一点吗？

Answer 1

当然有。 SvelteKit路由提供了两种类型的路由，页面（=前端）和端点（=后端）。

Endpoints run only on the server (or when you build your site, if prerendering). This means it's the place to do things like access databases or APIs that require private credentials or return data that lives on a machine in your production network. Pages can request data from endpoints. Endpoints return JSON by default, though may also return data in other formats.

CORS 本质上是一种凭据请求形式，因此将端点用作代理 API 是理想的。

在您的用例中，这样的路线是这样的：

// src/routes/api/weather/[city].json.js
export async function get({ params }) {
    const { city } = params;

    const res = await fetch(`https://www.metaweather.com/api/location/search/?query=${city}`);
    const weather = await res.json();

    return { body: weather };    
}

SvelteKit Endpoints documentation 详细说明 return 对象的预期格式、处理 POST 请求等

一旦此路由启动，您将访问它而不是访问前端代码中的原始 API，例如：

fetch(`http://localhost:3000/api/weather/${city}.json`);

这就是它的全部内容。

Sveltekit 代理 api 以避免 cors

Sveltekit proxy api to avoid cors

cors

svelte

sveltekit