Allowing CORS from React front end not allowing Express back end to use Bing API

react cors
no 'access-control-allow-origin' reactjs
create-react app enable cors
create-react app cors
react no-cors
cors react axios
react-native cors
access to fetch at from origin has been blocked by cors policy react

I currently have my front end and back end separate. When I start my React app on localhost:3000 to hit my Express app at localhost:8000/search/results?search_query=, I get blocked by CORS. So I set this in my Express backend's app.js file:

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

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use('/', index);
app.use('/search', search);
app.use('/results', result);

app.listen(8000, () => {
    console.log('App listening on port 8000...')
})

I am calling my back end route from my front end using this function in React:

 bingSearch(term) {
    fetch('http://localhost:8000/search/results?search_query=' + term)
    .then((response) => {
      response.json()
      .then((json) => {
        this.setState({results: json})
      })
    })
  } 

I don't get the CORS error after that. However, the route I'm hitting is a route that uses the Bing Web Search API which has a subscription key that I pass in through the header for that GET request. My app, however, just hangs now.

How and where should I be allowing the CORS that will allow my front end to connect to my back end but will not be disrupting my Bing API GET request?

You need to call next() in your middleware.

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

You can read more about it here: https://expressjs.com/en/guide/writing-middleware.html

Access-Control-Allow-Origin: Dealing with CORS Errors in React , Using the front end then causes CORS errors. Adding the code to my back end to allow CORS then stops my Bing API function to not work. Access-Control-Allow-Origin: Dealing with CORS Errors in React and Express was originally published by Dave Ceddia at Dave Ceddia on July 11, 2018. License This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

You can use cors-proxy-server for this. However, it is only good for testing purposes. For production, you need to have server side calls to Bing API. More information is here: https://docs.microsoft.com/en-us/azure/cognitive-services/bing-web-search/bing-web-search-resource-faq.

React with backend passport-twitter CORS issue, Allowing CORS from React front end not allowing Express back end to use Bing API - reactjs. Follow me on twitch!Express.js is one of the most popular node.js frameworks for serving websites or building APIs. This article is about how to enable Cross Origin Resource Sharing, also known as CORS. For that we need to set the correct headers in the response, which allow a browser to make use of the data … Continue reading "How to: enable CORS in express.js (node.js)"

I think you are having issue with allowed headers with cors, if I am correct, could you try add this with Express:

res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, BING_API_HEADER'
  );

So in front end, you will need to set header using the same name as BING_API_HEADER. This will allow you to access the header info from your server. Once you get the header, you can use it to make API calls.

App use cors not working, Getting this error in your React and/or Express app? No 'Access-Control-Allow-​Origin' header is present on the requested resource. You've Hitting an internal API (a request from http://yourapp.com to Front end. Back end If you're using Express, the easiest way to enable CORS is with the cors library. Hi @shekspir55 it's hard to really say without getting the full app from you to run and debug, but I can at least say that it is probably due to the wrong usage of the module -- you need to app.use this module:

React iframe cors, Hi, re: pinterest clone backend project I am receiving a CORS issue when trying to use passport-twitter with a react front end talking to a backend api. It is better suited for Express.js applications which are used with some server rendering No 'Access-Control-Allow-Origin' header is present on the requested resource. allowedHeaders: Configures the Access-Control-Allow-Headers CORS header. Expects a comma-delimited string (ex: ‘Content-Type,Authorization’) or an array (ex: ['Content-Type', 'Authorization'] ). If not specified, defaults to reflecting the headers specified in the request’s Access-Control-Request-Headers header.

I am getting “No 'Access-Control-Allow-Origin' header is present , There's a node package for using CORS with Express, which looks pretty simple to use. The Bing Maps key is provided as a parameter to the createMap method. Authorization of app back-end fails when trying to use FIspace front-​end that your web server is not sending back the headers that allow CORS i. com to api. Contribute. The content on this site stays fresh thanks to help from users like you! If you have suggestions or would like to contribute, fork us on GitHub.

Error request aborted react, Using CORS, a Server can allow some cross-origin (domain) requests and reject others. You can pass props to a shorthand. js and Express Back-end. React component that loads the words Hello and World from a back-end API via the Using an IFRAME is not a supported way of driving the authentication flow using​  The front-end that will consume this API is a React web application. I have had this CORS issue pop up from time to time, but would magically resolve itself and I could never get to the bottom of what is going on. So, now, it is back and seems to be not going away. I'll give you the pertinent code and see if you can spot what might be going on.

Comments
  • Sorry, I wasn't quite clear. My Bing API fetching is being done entirely in the back end. That's what is being used when the search/results route is being hit in Express. That's what your'e referring to when you say to have it be server side calls?
  • I edited my original post to include the function from my React front end that is sending the request to my back end route. When I set the header in my fetch app, what would be the key value pair? BING_API_HEADER : ? Would I be adding my subscription key there also the way I set it in my back end?
  • Where is the header you are talking about? You said you are sending the API key in the header?
  • I dont really get how the communication between FE and BE would affect your server api call with bing. All you need to do is to pass whatever you need from FE to BE, and then use those information to call the BING API
  • That's what I'm not getting either. My back end works fine with the API when I use Postman. Using the front end then causes CORS errors. Adding the code to my back end to allow CORS then stops my Bing API function to not work. No idea why. As far as the API key goes, I am sending that through a header in my bingSearch function using axios. But that's all back end. I'm not sure why my React front end affects that at all.
  • Postman takes care the CORS issue for you, that's why you are not running that issue. Could you explain to me the work flow? So the user on the FE does something to trigger the your server BE to do a API request with Bing. Is there anything coming from FE? Does FE needs to send anything to the server? Or it is a simple get request to tell server to go fetch something.