如何通过创建反应应用程序解决节点模块 the-noun-project（api 包装器）的 cors 问题

Posted 2023-02-22

【中文标题】如何通过创建反应应用程序解决节点模块 the-noun-project（api 包装器）的 cors 问题

【英文标题】：How to fix cors issue with node module the-noun-project (api wrapper) with create react app

【发布时间】：2020-06-08 14:49:25

【问题描述】：

我被这个问题困住了。我正在使用节点模块https://www.npmjs.com/package/the-noun-project 它在一定程度上可以工作，我正在使用创建反应应用程序。到目前为止，这是我的代码。我得到的错误在代码下方。现在我习惯于在 fetch 中使用 cors anywhere 之类的东西，在其中我手动更改 url 并在任何地方使用 cors 代理，但是当我使用单独的节点模块时，我不会'不知道如何将它代理到 cors，因为我无法更改 node_module 本身的代码，或者是否有替代解决方案？

提前感谢

import React from 'react';
import logo from './logo.svg';
import './App.css';
import NounProject from 'the-noun-project';

const nounProject = new NounProject(
    key: 'key',
    secret: 'secret'
);

console.log(nounProject);

nounProject.getIconsByTerm('goat', limit: 5, function (err, data) 
  if (!err) 
      console.log(data.icons);
  
);

function App() 
  return (
    <div className="App">
      <header className="App-header">
        <img src=logo className="App-logo"  />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );


export default App;

错误

Access to fetch at 'https://api.thenounproject.com/icons/goat?limit=5' 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.

【问题讨论】：

您将无法在浏览器中运行的前端 javascript 代码中使用该 NounProject 包装器。要从前端代码中使用，它需要提供某种方式来通过某种形式的代理发出请求，该代理添加必要的 CORS 响应标头。但它不会暴露任何类似的东西，所以你不可能在前端代码中使用包装器。如果您想要包装器提供的功能，则需要分叉代码并自己编写一些代理机制。

【参考方案1】：

看这里https://github.com/rosshettel/the-noun-project/issues/9，看起来您正在为此 npm 包访问的服务器没有设置正确的 CORS 标头。您将需要通过 API 路由或使用 CORS 阻止程序，具体取决于您的浏览器。

【讨论】：

如何通过 api 路由？有什么我可以在某处看看的例子吗？