如何防止 CORS 策略阻止从本地主机到第三方 API 的请求？

Question

我正在开发与第 3 方 API 集成的 ReactJS 应用程序。我可以使用 Postman 成功执行相同的请求，但是在浏览器中从 React 应用程序执行时它们被阻止。当我引用自己的后端时，我知道 CORS 以及如何解决问题，但在这种情况下，我显然不能。我试图用几个 JS 模块来做类似的事情，但每个都得到相同的错误。

Access to fetch at 'http://api.example.com/resource/request?param=value' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

import React, {Component} from 'react';
import fetch from 'fetch';
import request from 'request';

class App extends Component {
  render() {
    return (
        <div className="App">
          <button onClick={this.sendWithXmlHttpRequest}>send XMLHttpRequest
          </button>
          <button onClick={this.sendWithFetch}>send Fetch</button>
          <button onClick={this.sendWithRequest}>send Eequest</button>
        </div>
    );
  };

  sendWithXmlHttpRequest = () => {
    let req = new XMLHttpRequest();
    req.open('get', url, true);
    req.send();
  };

  sendWithFetch = () => {
    fetch.fetchUrl(url, (error, meta, body) => {
      console.log(error, meta, body);
    });
  };

  sendWithRequest = () => {
    request.get(url);
  };

}

const url = 'http://api.example.com/resource/request?param=value';

export default App;

Answer 1

这解决了问题，但我认为您不会愿意将其包含在生产就绪应用程序中。

  sendWithXmlHttpRequest = () => {
    // Added a Proxied server which works as a middle-man to fetch the data for you.
    const urlWithProxy = `https://cors-anywhere.herokuapp.com/${url}`
    let req = new XMLHttpRequest();
    req.open('get', url, true);
    req.send();
  };

这是from.。

最好的方法是让server.js 为您的捆绑应用程序提供服务，并且可能 - 几率很少 - 需要一些请求策略，但是，在我看来，无需配置就足够了，因为请求将通过 Node 代理而不是 React。

Answer 2

假设您使用 Node 作为后端。从服务器端发送 Access-Control-Allow-Origin 标头为 * 以便客户端了解服务器策略。您也可以添加 cors npm 包来为您完成这项工作。下面是我如何在快递方面解决这个问题的代码：

app.use(function(req, res, next) {
res.header(“Access-Control-Allow-Origin”, “*”);
res.header(“Access-Control-Allow-Methods”, “GET,PUT,POST,DELETE”);
res.header(
“Access-Control-Allow-Headers”,
“Origin, X-Requested-With, Content-Type, Accept”
);
next();
});
app.options(“*”, cors());

此外，您可以在浏览器上安装一些 CORS 扩展并启用请求。 一种这样的扩展 https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc