带有汇总的 Svelte 代理？

Question

我正在尝试将来自 Svelte 应用程序的请求代理到我的后端 API 运行的不同端口。我想在开发环境中使用汇总代理。我阅读了使用 webpack 代理 here 的替代方案，但我想尝试一下汇总代理。这不是生产中的问题。

按照建议，我尝试配置 rollup-plugin-dev 但是，每当我向天气预报发出请求时，我仍然会收到 CORS 错误。下面是我的配置和调用：

import dev from 'rollup-plugin-dev'

// other code

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
  plugins: [
        dev({ 
            proxy: [{ from: '/weatherforecast', to: 'https://localhost:7262' }] 
        }),
        // other code
    ];

和 App.svelte 看起来像这样：

<script>
    import { onMount } from "svelte";

    const endpoint = "/weatherforecast";

    onMount(async function () {
        try {
            const response = await fetch(endpoint);
            const data = await response.json();
            console.log(data);
        } catch (error) {
            console.log(error);
        }       
    });
</script>

感谢任何解决此问题的帮助。

Answer 1

发生的事情是代理正在通过 CORS headers un-touched，所以您基本上是在与 API 交互，就好像代理根本不存在一样，关于 CORS。

我会注意到你可以在开发中解决这个问题，但请记住这个问题也会在生产中出现，所以你可能只需要重新考虑你如何正在获取此数据。

不过对于开发，您可以使用 cors-anywhere 之类的东西。这是一个中间件，您可以运行通过可以为您重写 headers 的开发服务器。

Answer 2

要在 dev 环境上配置 rollup-proxy，您需要删除对 serve 方法的调用，调用 dev 方法并将代理调用移到 dev 方法中：

import dev from 'rollup-plugin-dev'

// other code

export default {
    input: 'src/main.js',
    output: {

        // other code

        commonjs(),

        // enable the rollup-plugin-dev proxy
        // call `npm run start` to start the server
        // still supports hot reloading
        !production && dev({
            dirs: ['public'],
            spa: 'public/index.html',
            port: 5000,
            proxy: [
                { from: '/weatherforecast', to: 'https://localhost:7262/weatherforecast' },
            ],
        }),

        // line below is no longer required
        // !production && serve(),

        // other code
    ];

带有汇总的 Svelte 代理？

Svelte Proxy with rollup?

proxy

svelte