javascript - 在react/redux应用程序中执行api调用时出现CORS问题

Question

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

XMLHttpRequest cannot load https://us9.api.mailchimp.com/3.0/members. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access. The response had HTTP status code 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 实例替换为您的 api url，并从服务器本身执行 api 调用。