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

Question

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

let client = new elasticsearch.Client({

    host: "https://{cred.user}:{cred.pass}@@servername.domain:11121",

    log: "trace",

});

接口查询：

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())

我的问题如下： 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 的新手，所以我不太了解内部结构。我已经被困在这里好几天了，真的需要一些帮助。谢谢。

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

Answer 1

在节点 js API 中添加以下代码&nbsp; app.use(function(req, res, next) {&nbsp; &nbsp; &nbsp;res.header("Access-Control-Allow-Origin", "*");&nbsp; &nbsp; &nbsp;res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");&nbsp; &nbsp; &nbsp;next();});或者//allow OPTIONS on all resourcesapp.options('*', cors())

Answer 2

您需要为 API 请求设置代理服务器 - https://create-react-app.dev/docs/proxying-api-requests-in-development/我不完全了解 Elastic 服务器的详细信息，但您可以将 Express 代码放入src/server.js文件中，受https://stackoverflow.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) {&nbsp; var url = 'https://' +&nbsp; &nbsp; req.get('host').replace('localhost:80', 'servername.domain:11121') +&nbsp;&nbsp; &nbsp; req.url&nbsp; req.pipe(request({ qs:req.query, uri: url })).pipe(res);})app.listen(80, function () {&nbsp; console.log('CORS-enabled web server listening on port 80')})更新 package.json"scripts": {&nbsp; &nbsp;...&nbsp; &nbsp;"server": "node src/server.js"},"proxy": "http://localhost:80"修改您的客户端：let client = new elasticsearch.Client({&nbsp; &nbsp; host: "{cred.user}:{cred.pass}@@localhost:80",&nbsp; &nbsp; log: "trace",});并通过npm run server（之前或之后npm start，例如在单独的终端中）启动它。在第一次开始之前，您需要安装所有required 模块，npm i -D express request cors.

Answer 3

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