Sveltekit代理API可避免CORS [英] Sveltekit proxy api to avoid cors

问题描述

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

我想我需要为https://www.metaweather.com设置代理。有什么方法可以使用Svelte工具包来设置代理吗？

推荐答案

当然有。SvelteKit Routing提供两种类型的路由，页面(=前端)和端点(=后端)。

引用SvelteKit routing docs：

终结点仅在服务器上运行(或者在构建站点时运行，如果是预渲染)。这意味着它可以执行诸如Access数据库或需要私有凭据的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 documentation详细说明返回对象的预期格式、处理POST请求等内容。

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

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

差不多就是这样。

这篇关于Sveltekit代理API可避免CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！