Sveltekit 代理 api 以避免 Cors

Question

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

我想我需要设置一个代理，https://www.metaweather.com有什么方法可以使用 svelte 套件来做到这一点吗？

Answer 1

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

引用SvelteKit 路由文档：

端点仅在服务器上运行（或者当您构建站点时，如果预渲染）。这意味着它可以执行诸如访问需要私有凭据的数据库或 API或返回生产网络中的计算机上的数据之类的操作。页面可以从端点请求数据。端点默认返回 JSON，但也可能返回其他格式的数据。

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 文档详细介绍了返回对象的预期格式、处理 POST 请求等内容。

一旦这条路由启动，您就可以访问它来代替访问前端代码中的原始 API，例如：

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

这几乎就是全部内容了。

针对新版本 SvelteKit 用户的重要更新

在 SvelteKit 的较新版本中，在切换到稍微不同的路由约定之后，上面的端点现在应该位于src/routes/api/weather/[city].json/+server.js.但其内容仍应按原样运行。（不再正确，见下文）。

SvelteKit 1.0+ 更新

SvelteKit 1.0 版本中端点处理程序的结构略有变化。代理路由现在如下所示：

// src/routes/api/weather/[city].json/+server.js
export function GET({ params }) { // note the capitalized method name
    const { city } = params;

    // we can now simply pass on the original 3rd-party api response promise
    return fetch(`https://www.metaweather.com/api/location/search/?query=${city}`);
}