使用 Node.js 后端在我的 React 应用程序中启用 CORS

Posted 2023-03-04

【中文标题】使用 Node.js 后端在我的 React 应用程序中启用 CORS

【英文标题】：Enable CORS in my React App with Node.js backend

【发布时间】：2020-03-17 05:37:09

【问题描述】：

我使用 create-react-app 来构建我的 react 应用程序。这个应用程序在另一个 API（elasticsearch）上进行 POST 调用，托管在不同的服务器上（不是我拥有/管理的）。因此，一旦用户在表单中输入数据，onSubmit 基本上会调用 getResponse() 方法来进行调用。 初始化客户端：

let client = new elasticsearch.Client(
    host: "https://cred.user:cred.pass@@servername.domain:11121",
    log: "trace",
);

API 查询：

getResponse = () => 
        client
          .search(
            index: 'custom_index_1',
            body: 
                query: 
                    match: "data": this.state.data
                ,
            
        ,function(error, response, status) 
            if (error) 
                const errorMessage= error;
                console.log(errorMessage);
            
            else 
                this.setState(results: response.hits.hits);
                console.log(this.state.results);
            
        );
    

但我收到如下 CORS 错误：

Failed to load resource: the server responded with a status of 403 (Forbidden)
localhost/:1 Access to XMLHttpRequest at 'https://servername.domain:11121/' 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.console.js:40 
WARNING: 2019-11-21T07:54:32Z No living connections

在阅读了关于相同问题的 SO 后，我发现使用 cors npm 模块可以解决此问题（至少在开发中）。但我不明白我把这段代码放在哪里：

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())

或

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) 
  res.json(msg: 'This is CORS-enabled for all origins!')
)

app.listen(80, function () 
  console.log('CORS-enabled web server listening on port 80')
)

我的问题如下： 1.我在哪里添加上面的这段代码？在我的反应应用程序的 app.js 中？如果是的话，有人可以给我一个例子吗？我正在使用这样的东西：

import statements
class App extends Component 
 <code>

export default App;

如果要将此代码添加到其他文件中，那么是哪个文件？是 server.js 吗？如果是，我在哪里可以找到这个？我使用的是 Windows 7。节点安装在客户目录中：C:\MYSW\NodeJs\12.1.0。我在这里看到了一些 server.js：C:\Users\user1\Scratch\node\myreact_ui\node_modules\react-dom\server.js，但它是正确的文件

请给我一个示例，说明如何添加代码以及在文件中的确切位置。我是 React 和 Node 的新手，所以我不太了解内部结构。我已经被困在这里好几天了，真的需要一些帮助。谢谢。

到处都是，添加这段代码就可以工作，没有人提到我在哪里添加它以及如何添加？任何帮助表示赞赏。

【参考方案1】：

在 node js API 中添加以下代码

  app.use(function(req, res, next) 
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     next();
);

或

//allow OPTIONS on all resources
app.options('*', cors())

【讨论】：

这实际上对我有用！谢谢！快速简单！

【参考方案2】：

您需要为 API 请求设置代理服务器 - https://create-react-app.dev/docs/proxying-api-requests-in-development/

我不太了解 Elastic 服务器的详细信息，但您可以将 Express 代码放入 src/server.js 文件中，灵感来自 https://***.com/a/20539239/1176601：

var express = require('express')
var request = require('request')
var cors = require('cors')
var app = express()

app.use(cors())

app.use('/', function(req, res) 
  var url = 'https://' +
    req.get('host').replace('localhost:80', 'servername.domain:11121') + 
    req.url
  req.pipe(request( qs:req.query, uri: url )).pipe(res);
)

app.listen(80, function () 
  console.log('CORS-enabled web server listening on port 80')
)

更新 package.json

"scripts": 
   ...
   "server": "node src/server.js"
,
"proxy": "http://localhost:80"

修改你的客户端：

let client = new elasticsearch.Client(
    host: "cred.user:cred.pass@@localhost:80",
    log: "trace",
);

并以npm run server 开头（在npm start 之前或之后，例如在单独的终端中）。

在第一次启动之前，您需要安装所有required 模块，npm i -D express request cors。

【讨论】：

我没有 src/server.js。我是否应该创建一个新文件，在文件中添加该代码，然后对 package.json 进行更改并使用 npm run server 在不同的终端上运行它？

谢谢，现在就试试。将很快更新。感谢您的快速帮助！

我进行了更改并运行了“npm run server”，它抛出了这个错误：错误代码 ELIFECYCLE 错误 errno1 npm ERR！报告portal_ui@0.1.0 服务器脚本失败。 npm 错误！这可能不是 npm 的问题。上面可能还有额外的日志输出。

啊，您的 package.json 中只有 1 个“服务器”脚本吗？如果是，上面的附加输出是什么？如果不是，请将文件和命令都重命名为dev_server...

你在运行它之前npm i -D express cors了吗？

【参考方案3】：

您应该将它添加到您配置正在使用的服务器的文件中。如果您使用的是 express，您会将其添加到您正在谈论的 server.js 文件中，但您似乎有一个 elasticsearch 服务器和一个 react 应用程序，因此您没有 node.js 后端。

您可能必须在 elasticsearch 服务器中包含一个 cors 配置。

【讨论】：

create-react-app on localhost:3000 => 他正在使用 webpack-dev-server

这里有一些解释：daveceddia.com/…，但我理解这个问题，我只是想弄清楚当我无法触摸/更改弹性搜索 API 时如何最好地解决它。跨度>