I used create-react-app to build my react app. This app does a POST call on another API (elasticsearch), hosted on a different server (not owned/managed by me). So once the user enters the data in the form, onSubmit basically calls getResponse() method that makes the call. Initialize client:
let client = new elasticsearch.Client({
host: "https://{cred.user}:{cred.pass}@@servername.domain:11121",
log: "trace",
});
API query:
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);
}
});
}
But I'm getting the CORS error as follows:
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
After reading in SO about the same issue, I found that using the cors npm module can fix this issue (at least in development). But I do not understand where do I put this code:
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
OR
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')
})
My questions are as follows: 1. Where do I add this code above? in my react app's app.js? If yes, can someone give me an example please. I am using something like this:
import statements
class App extends Component {
<code>
}
export default App;
If this code is to be added to some other file then which file? Is it server.js? If yes, where do I find this? I'm using Windows 7. Node is installed in a customer directory: C:\MYSW\NodeJs\12.1.0. I see some server.js in here: C:\Users\user1\Scratch\node\myreact_ui\node_modules\react-dom\server.js, but is it the right file
Please give me a sample of how the code is added and where exactly in the file. I am new to React and Node so I do not know much about the internals. I'v been stuck here for days now and really need some help. Thanks.
Everywhere it says, add this code and it work, no one mentions where do I add it and how? Any help appreciated.
Enable All CORS Requests If you want to enable CORS for all the request you can simply use the cors middleware before configuring your routes: const express = require('express'); const cors = require('cors'); const app = express(); app.
export default App; Now run the Nodejs process npm run dev in one terminal and in another terminal start Reactjs using npm start simultaneously. Output: We see react output we see a button “Connect” we have to click it. Now when we see the console server-side we see that the ReactJS is connected with NodeJS.
Add below code in 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();
});
or
//allow OPTIONS on all resources
app.options('*', cors())
You need to set up a proxy server for API requests - https://create-react-app.dev/docs/proxying-api-requests-in-development/
I do not fully understand the details for Elastic server, but you can put the Express code into src/server.js
file, inspired by 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')
})
update package.json
"scripts": {
...
"server": "node src/server.js"
},
"proxy": "http://localhost:80"
Modify your client:
let client = new elasticsearch.Client({
host: "{cred.user}:{cred.pass}@@localhost:80",
log: "trace",
});
And start it by npm run server
(before or after npm start
, e.g. in a separate terminal).
Before the first start, you will need to install all require
d modules, npm i -D express request cors
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With