CORS error - unable to fetch Rest api from JIRA using React.js

Question

I am working on react.js project where i have to fetch the data from JIRA rest api and display it using react.js . API works fine when i am accessing it directly from the browser but when i try to fetch using react.js its causing the below error.

Access to fetch at 'API' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Note:

I have tried mode : " no-cors" and even installing npm cors lib but they are not solving the problem.

React.js code

import React, { Component } from 'react';

class App extends Component {

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

  componentDidMount()
  {


    fetch('API which i cant display but works 100% fine . please ignore') 
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true, 
          items: json,
        })
      })
      .catch(e => { console.log("error: ",e) }); 
  }

  render()
  {
    var { isLoaded, items } = this.state;
    console.log("Hello ", items);

    if (!isLoaded)
    {
      return <div>Loading..</div>
    }
    else {
      
      
      return (
        <div className="App">
          Id : item.id
          <ul>
            {items.map(item => (
              <li key={item.id}>
                Name: {item.name}
                Email: {item.email}
              </li>
            ))};
            </ul>
        </div>
      );
      
    }
  }
}

export default App;

Possible duplicate of [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) — Quentin, Nov 28 '18 at 08:38
Are you sending the fetch request to a backend express file? If so please display that. — djamaile, Nov 28 '18 at 09:21

score 0 · Answer 1 · answered Nov 28 '18 at 08:32

0

You may need to whitelist your port and local address in JIRA.

answered Nov 28 '18 at 08:32

SBimochan

474
4
13

i dont have access to modify jira whitelist. – Divakar R Nov 28 '18 at 08:35
You can't fetch data from something you don't have access to. – SBimochan Nov 28 '18 at 14:40

score -2 · Answer 2 · answered Nov 28 '18 at 08:35

-2

Your browser security might be block your request. Try to open browser in not security mode.

on macos:

open -a Google\ Chrome --args --disable-web-security --user-data-dir

answered Nov 28 '18 at 08:35

itidsu

54
10

CORS error - unable to fetch Rest api from JIRA using React.js

2 Answers2