'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)

javascript node.js reactjs axios cors
Scott Davidson picture Scott Davidson · Jan 6, 2017 · Viewed 107k times · Source

I'm running into an issue with my isomorphic JavaScript app using React and Express.

I am trying to make an HTTP request with axios.get when my component mounts

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

I am getting a status 200 res from the API, but I am not getting any response data and getting an error in my console

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

However, if I make the request in my server.js

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

It works fine and I get response data when the server starts. Is this an issue with the actual API or am I doing something wrong? If this was a CORS issue I'm guessing the request in server.js wouldn't work either? Thanks!

Answer

Colleen Purcell picture Colleen Purcell · Mar 22, 2017

Use the google Chrome Extension called Allow-Control-Allow-Origin: *. It modifies the CORS headers on the fly in your application.

Related questions

Reactjs - Form input validation

My Contact page form is as follows, <form name="contactform" onSubmit={this.contactSubmit.bind(this)}> <div className="col-md-6"> <fieldset> <input ref="name" type="text" size="30" placeholder="Name"/> <br/> <input …

Read More
React - changing an uncontrolled input

I have a simple react component with the form which I believe to have one controlled input: import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"&…

Read More
"React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>

I have the following render method in my React Native code: render() { const {height, width} = Dimensions.get('window'); return ( <View style={styles.container}> <Image style={{ height:height, width:width, }} source={require('image!foo')} resizeMode='cover' /> <…

Read More