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

Posted 2023-03-04

【中文标题】如何防止 CORS 策略阻止从本地主机到第三方 API 的请求？

【英文标题】：How to prevent CORS policy to block requests from localhost to third party API?

【发布时间】：2019-12-03 16:00:50

【问题描述】：

我正在开发与第 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;

【问题讨论】：

检查这个 - restlet.com/company/blog/2016/09/27/how-to-fix-cors-problems

【参考方案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。

【讨论】：

谢谢。这对于开发和本地测试很有用。

您是否考虑过为生产目的制作一个简单的服务器？

【参考方案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

【讨论】：

谢谢，但不幸的是，我无法控制后端。我只能嘲笑它，但这不是我想要实现的。