Question

我正在构建一个React / Express / Node应用程序并尝试向Instagram发出AJAX请求。不幸的是，当我这样做时，我一直遇到错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

但我设置了标题

res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, accept');
  res.setHeader('Access-Control-Allow-Credentials', true);

虽然我尝试在本地发出这些请求，但我也使用heroku进行了部署，并尝试使用https（而不是http）网址。然而，我仍然收到同样的错误。

因此出于某种原因，这是不允许的。我想这是不可能的（如果是的话，请告诉我）。此外，Instagram在您的应用设置上也有此选项：

[]禁用隐式OAuth

禁用网络应用的客户端（隐式）OAuth流程。如果选中此选项，Instagram将通过仅允许使用服务器端（显式）OAuth流的授权请求来更好地保护您的应用程序。服务器端流程被认为更安全。有关详细信息，请参阅身份验证文档。

那么，如果我让用户点击一个按钮，将请求发送到我的后端，在我的后端发出ajax请求，当我收到响应时，然后将其返回到前端？这看起来很复杂，但上面的信息让人觉得这样更安全。但它需要更多的网络请求。什么是最好的？

Answer 1

当您从localhost请求任何内容时，大多数浏览器都会忽略典型的与CORS相关的标头。设置一个本地开发域名（例如通过* {nix}上的/etc/hosts），然后尝试再次与您的expressjs或Instagram的API通信，它应该可以正常工作。

如您在问题中所述，通过您自己的应用程序进行代理通常仅在第三方API未在其API上设置正确的CORS相关标头时才有用。原因是服务器API调用（例如，通过curl）不实现CORS，因此不执行预检请求（例如OPTIONS http调用）。另一方面，浏览器可以，但是当您从localhost域访问内容时，它们无法正常工作。

AJAX调用应该在服务器上吗？

1 个答案: