Svelte API 代理 cors

Question

我不确定这是否属于这里，但我在开发我的 svelte 应用程序时遇到了问题。在开发过程中，它目前在独立服务器上运行（遵循使用 rollup 和 sirv 的指南）并针对不同端口上的后端 API。

稍后这些将被合并，但现在在开发过程中我看到了很多 cors 问题（这是有道理的），并且由于我目前无法更改后端，我想知道正常的操作过程是什么才能使其正常工作?

我假设我应该以某种方式创建一个以某种方式与汇总相关联的中间件代理，但我不确定如何。

那么关于如何设置它的任何建议？

刚刚测试运行这个：https://www.npmjs.com/package/local-cors-proxy 但这不起作用，因为我需要credentials: "include"一个特定的获取请求，它导致The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Answer 1

我今天遇到了同样的问题，并在 Rollup 生态系统中进行了一些调查，似乎您可以决定使用允许参数的rollup-plugin-dev插件proxy（似乎使用koa-better-http-proxy） . 使用这个插件，您可以配置一个代理，甚至可以接受自定义函数来处理请求，让您控制发生的事情。这也许就是你正在寻找的。

但是，我想在使用rollup-plugin-livereload插件设置的应用程序中保持实时重新加载。然而，由于 livereload 和 dev 插件都提供了自己的服务器，因此您只能同时使用一个。

更多的研究向我展示了 Rich Harris 的这篇文章，他们一致认为 Rollup 用于库开发，而 Webpack 用于应用程序开发。考虑到这一点，我设置了Webpack svelte 模板，它允许按照他们的文档中的描述配置devServerwith a 。这是我申请的路线。proxy

Answer 2

这是因为 local-cors-proxy 使用cors库，该库具有*其选项的默认值origin（对应于Access-Control-Allow-Origin标头）。

您可以修改 local-cors-proxy 的本地副本，编辑lib/index.js，将该行替换proxy.use(cors());为：

  proxy.use(cors({
    origin: 'http://yourapp.com'    // maybe 'http://127.0.0.1' in your case?
  }));

（或者更好的是，向 local-cors-proxy 添加 cors 自定义选项并提交 PR，以便其他人受益；-）