如何在 react.js 中允许 CORS？

Question

我正在使用 Reactjs 并在 javascript 中通过 AJAX 使用 API。我们如何解决这个问题？以前我使用 CORS 工具，但现在我需要启用 CORS。

原文由 Shweta Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 如何克服 ReactJS 中的 CORS 问题的 可能重复问题

CORS 通过添加新的 HTTP 标头来工作，这些标头允许服务器描述允许使用 Web 浏览器读取该信息的源集。这必须在服务器中配置以允许跨域。

您可以通过名为 CORS 的 chrome 插件临时解决此问题。

原文由 myst1c 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 React 中有 6 种方法可以做到这一点，

数字 1 和 2 和 3 是最好的：

1-在服务器端配置CORS

像这样手动设置 2 个标题：

 resonse_object.header("Access-Control-Allow-Origin", "*");
resonse_object.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

3-config NGINX for proxy_pass 在这里 解释。

4-使用 chrom 扩展绕过跨源策略（仅用于开发，不推荐！）

5-使用下面的 URL 绕过跨源策略（仅用于开发）

 "https://cors-anywhere.herokuapp.com/{type_your_url_here}"

6-在你的 package.json 文件中使用 proxy 文件：（仅用于开发）

如果这是您的 API： http://45.456.200.5:7000/api/profile/

将此部分添加到您的 package.json 文件中： "proxy": "http://45.456.200.5:7000/",

然后使用 api 的下一部分提出您的请求：

 React.useEffect(() => {
    axios
        .get('api/profile/')
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
});

原文由 sina 发布，翻译遵循 CC BY-SA 4.0 许可协议