亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 Node.js 后端在我的 React 應用程序中啟用 CORS

使用 Node.js 后端在我的 React 應用程序中啟用 CORS

Qyouu 2022-01-07 09:55:00
我使用 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 statementsclass 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 的新手,所以我不太了解內部結構。我已經被困在這里好幾天了,真的需要一些幫助。謝謝。到處都是,添加此代碼并且它可以工作,沒有人提到我在哪里添加它以及如何添加它?任何幫助表示贊賞。
查看完整描述

3 回答

?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

在節點 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())


查看完整回答
反對 回復 2022-01-07
?
慕容3067478

TA貢獻1773條經驗 獲得超3個贊

您需要為 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) {

  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.


查看完整回答
反對 回復 2022-01-07
?
慕尼黑8549860

TA貢獻1818條經驗 獲得超11個贊

您應該將其添加到您配置正在使用的服務器的文件中。如果您使用的是 express,您會將其添加到您正在談論的 server.js 文件中,但您似乎有一個 elasticsearch 服務器和一個 react 應用程序,因此您沒有 node.js 后端。

您可能必須在彈性搜索服務器中包含一個 cors 配置。


查看完整回答
反對 回復 2022-01-07
  • 3 回答
  • 0 關注
  • 212 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號