Accessing microservice from React front end violates the document's Content Security Policy

Question

In my project I have a main app hosted at localhost:3000, and a microservice server hosted at localhost:3001 the main app has a front end with a react component that needs to access data from the microservice. So I have my component as follows:

import React from "react"
class Items extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentDidMount(){
    fetch('http://localhost:3001/v1/companies/1/items.json')
      .then((response) => { return response.json() })
      .then((data) => {this.setState({ items: data }) });
  }

  render () {
    var items = this.state.items.map((item) => {
      return(
        <div key={item.id}>
          <h1>{item.name}</h1>
          <p>{item.description}</p>
        </div>
      )
    }
    )
    return (
      <div>
        {items}
      </div>
    )
  }
}

export default Items

This then gives me the following error:

Refused to connect to 'http://localhost:3001/v1/companies/1/items.json' 
because it violates the following Content Security Policy directive: 
"connect-src 'self' https: http://localhost:3000 ws://localhost:3000"

Which I assume is due to xss, I'm not sure how to get around this though, any help would be greatly appreciated.