在 react/redux 应用程序中执行 api 调用的 CORS 问题

Question

我试图实现mailchimp api，但遇到了跨域问题，chrome 中出现如下错误：

XMLHttpRequest 无法加载 https://us9.api.mailchimp.com/3.0/members。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://example.com” 使用权。响应的 HTTP 状态代码为 501。

经过一些研究，我发现我进行的 api 调用是从浏览器发出的（我只是从我的一个操作中调用 api），但要解决这个问题，它们需要在服务器上进行。

因此，我试图找出一种方法来从我的操作内部的服务器调用 api，以绕过此问题。

编辑： 我发现的解决方案之一是为此使用 jsonp，但我也不得不放弃它，因为我无法使用它进行身份验证。

Answer 1

我找到的解决方案是通过express代理api调用，方式如下：

在您的快速配置中：

import request from 'request'

app.use('/api', function (req, res) {
  let url = 'your_api_url' + req.url
  req.pipe(request(url)).pipe(res)
})

这允许您做的不是在您的组件中调用https://myapi.com/endpoint，而是使用/api/endpoint，这样express 将用您的api url 替换您服务器上的所有/api 实例，并从服务器本身。