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的所有实例从服务器本身执行api调用。

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

1 个答案: