我从“TraversyMedia”教程中发现的最简单的方法是在“axios”或“fetch”api中使用https://cors-anywhere.herokuapp.com

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

例如

axios.get(`https://cors-anywhere.herokuapp.com/https://www.api.com/`)

在你的情况下，将 url 编辑为

url: 'https://cors-anywhere.herokuapp.com/https://www.api.com',

理想的方法是为您的服务器添加 CORS 支持。

您也可以尝试使用单独的jsonpmodule。据我所知 axios 不支持 jsonp。所以我不确定您使用的方法是否符合有效的 jsonp 请求。

对于 CORS 问题，还有另一种骇人听闻的解决方法。您必须使用 nginx 服务器部署您的代码，作为您的服务器和客户端的代理。可以欺骗我们proxy_pass指令的东西。以这样的方式配置您的 nginx 服务器，以便处理您的特定请求的位置块将proxy_pass或将您的请求重定向到您的实际服务器。CORS 问题通常是由于网站域的变化而发生的。当您有一个单独的代理作为客户端和服务器的面孔时，浏览器会误以为服务器和客户端驻留在同一个域中。因此没有 CORS。

考虑这个例子。

您的服务器my-server.com和您的客户端是my-client.com 配置 nginx 如下：

// nginx.conf

upstream server {
    server my-server.com;
}

upstream client {
    server my-client.com;
}

server {
    listen 80;

    server_name my-website.com;
    access_log /path/to/access/log/access.log;
    error_log /path/to/error/log/error.log;

    location / {
        proxy_pass http://client;
    }

    location ~ /server/(?<section>.*) {
        rewrite ^/server/(.*)$ /$1 break;
        proxy_pass http://server;
    }
}

这my-website.com将是可访问代码的网站的结果名称（代理网站的名称）。一旦以这种方式配置了 nginx。您将需要修改请求，以便：

• 所有 API 调用都从my-server.com/<API-path>变为my-website.com/server/<API-path>

如果您不熟悉 nginx，我建议您阅读文档。

简要解释上面配置中发生的事情：

• 在upstream小号定义实际的服务器向谁请求将被重定向
• 该server块用于定义 nginx 服务器的实际行为。
• 如果有多个服务器块，server_name则用于标识将用于处理当前请求的块。
• 在error_log和access_log指令用于定义日志文件的位置（用于调试）
• 这些location块定义了不同类型请求的处理：
  1. 第一个位置块处理所有请求，/所有这些请求都被重定向到客户端
  2. 第二个位置块处理所有以 开头的请求/server/<API-path>。我们会将所有此类请求重定向到服务器。

注意：/server这里用于区分客户端请求和服务器端请求。由于域相同，因此没有其他方法可以区分请求。请记住，没有这样的约定迫使您添加/server所有此类用例。它可以更改为任何其他字符串，例如。/my-server/<API-path>，/abc/<API-path>等等。

尽管这种技术应该可以解决问题，但我强烈建议您向服务器添加 CORS 支持，因为这是处理此类情况的理想方式。

如果您希望在开发时避免执行所有这些操作，则可以使用此chrome 扩展。它应该允许您在开发期间执行跨域请求。

通过一个名为 CORS 的 chrome 插件临时解决了这个问题。顺便说一句，后端服务器必须向前端请求发送正确的标头。

除了@ Nahush的回答之外的另一种方式，如果您已经在项目中使用Express 框架，那么您可以避免使用 Nginx 进行反向代理。

更简单的方法是使用express-http-proxy

1. 运行npm run build以创建包。

   var proxy = require('express-http-proxy');
   
   var app = require('express')();
   
   //define the path of build
   
   var staticFilesPath = path.resolve(__dirname, '..', 'build');
   
   app.use(express.static(staticFilesPath));
   
   app.use('/api/api-server', proxy('www.api-server.com'));
   

使用react代码中的“/api/api-server”来调用 API。

因此，该浏览器会将请求发送到同一主机，该主机将在内部将请求重定向到另一台服务器，浏览器会觉得它来自同一来源；)

您可以让 React 开发服务器将您的请求代理到该服务器。只需像这样将您的请求发送到您的本地服务器：url: "/" 并将以下行添加到您的package.json文件中

"proxy": "https://awww.api.com"

但是，如果您向多个来源发送 CORS 请求，则必须自己手动配置代理此链接将帮助您设置创建 React App Proxying API 请求