React component has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

You need to add cors on the server-side This can easily be done by stopping the server and then

npm install cors

and then adding this to your main routers file if you are using multiple files for routing

const express = require("express");
const router = express.Router();
const cors = require("cors");
router.use(cors());

and you are all setup for multi files router.

For single file router you should use the following code:

const express = require("express")
const app = express()
const cors = require("cors")

app.use(cors())

and you are all setup This should solve the error

Adding mode: 'no-cors' to the fetch method should do the trick

  fetch(clientConfiguration['communitiesApi.local'], {
    mode: 'no-cors'
  })
  .then((response) => {
      return response.json();                
  })
  .then(data => {
      console.log(data);
      let communitiesFromApi = data.map(community => { return { value: community, display: community } });
      this.setState({ communities: [{ value: '', display: 'Select a Community...' }].concat(communitiesFromApi) });    

  }).catch(error => {
      console.log(error);
  });

When using axios I like to use Allow CORS: Access-Control-Allow-Origin from chrome web store, pretty handy when developing web apps on localhost

When loading React (or other libraries that might throw errors) from a CDN, add the crossorigin attribute to your <script> tags:

<script crossorigin src="..."></script>

For example on node js envrionmnet.

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors())
app.get('/', (req, res) => {
    res.json({
        message: 'Hello World'
    });
})

You just need to install it in your Express project with npm install cors, then require it and add it as a middleware:

var express = require('express');
// Import the library:
var cors = require('cors');

var app = express();

// Then use it before your routes are set up:
app.use(cors());

For production use, it’s best not to allow all origins. Instead, create a whitelist of allowed domains, and check each request against the whitelist. Here’s how:

// Set up a whitelist and check against it:
var whitelist = ['http://example1.com', 'http://example2.com']
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

// Then pass them to cors:
app.use(cors(corsOptions));

If CORS and the proxy server don’t work for you, JSONP may help. You essentially make a GET request with a callback parameter:

(get) http://api.example.com/endpoint?callback=foo

The server will wrap the JSON reply in a function call to your callback, where you can handle it:

foo({"your": "json", here: true})