CORS error - unable to fetch Rest api from JIRA using React.js
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;reactjs jira jira-rest-api
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
add a comment |
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;reactjs jira jira-rest-api
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
Possible duplicate of XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
– Quentin
Nov 28 '18 at 8:38
Are you sending the fetch request to a backend express file? If so please display that.
– Peter rosevelt
Nov 28 '18 at 9:21
no. i am not sending fetch request to backend express
– Divakar R
Nov 28 '18 at 10:09
add a comment |
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;reactjs jira jira-rest-api
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
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;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;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;reactjs jira jira-rest-api
reactjs jira jira-rest-api
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
edited Nov 28 '18 at 8:32
Divakar R
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
asked Nov 28 '18 at 8:30
Divakar RDivakar R
2916
2916
Possible duplicate of XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
– Quentin
Nov 28 '18 at 8:38
Are you sending the fetch request to a backend express file? If so please display that.
– Peter rosevelt
Nov 28 '18 at 9:21
no. i am not sending fetch request to backend express
– Divakar R
Nov 28 '18 at 10:09
add a comment |
Possible duplicate of XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
– Quentin
Nov 28 '18 at 8:38
Are you sending the fetch request to a backend express file? If so please display that.
– Peter rosevelt
Nov 28 '18 at 9:21
no. i am not sending fetch request to backend express
– Divakar R
Nov 28 '18 at 10:09
Possible duplicate of XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
– Quentin
Nov 28 '18 at 8:38
Possible duplicate of XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
– Quentin
Nov 28 '18 at 8:38
Are you sending the fetch request to a backend express file? If so please display that.
– Peter rosevelt
Nov 28 '18 at 9:21
Are you sending the fetch request to a backend express file? If so please display that.
– Peter rosevelt
Nov 28 '18 at 9:21
no. i am not sending fetch request to backend express
– Divakar R
Nov 28 '18 at 10:09
no. i am not sending fetch request to backend express
– Divakar R
Nov 28 '18 at 10:09
add a comment |
2 Answers
2
active
oldest
votes
You may need to whitelist your port and local address in JIRA.
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
i dont have access to modify jira whitelist.
– Divakar R
Nov 28 '18 at 8:35
You can't fetch data from something you don't have access to.
– SBimochan
Nov 28 '18 at 14:40
add a comment |
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 8:35
onurkaya.onurkaya.
166
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53515134%2fcors-error-unable-to-fetch-rest-api-from-jira-using-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You may need to whitelist your port and local address in JIRA.
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
i dont have access to modify jira whitelist.
– Divakar R
Nov 28 '18 at 8:35
You can't fetch data from something you don't have access to.
– SBimochan
Nov 28 '18 at 14:40
add a comment |
You may need to whitelist your port and local address in JIRA.
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
i dont have access to modify jira whitelist.
– Divakar R
Nov 28 '18 at 8:35
You can't fetch data from something you don't have access to.
– SBimochan
Nov 28 '18 at 14:40
add a comment |
You may need to whitelist your port and local address in JIRA.
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
You may need to whitelist your port and local address in JIRA.
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
answered Nov 28 '18 at 8:32
SBimochanSBimochan
508
508
i dont have access to modify jira whitelist.
– Divakar R
Nov 28 '18 at 8:35
You can't fetch data from something you don't have access to.
– SBimochan
Nov 28 '18 at 14:40
add a comment |
i dont have access to modify jira whitelist.
– Divakar R
Nov 28 '18 at 8:35
You can't fetch data from something you don't have access to.
– SBimochan
Nov 28 '18 at 14:40
i dont have access to modify jira whitelist.
– Divakar R
Nov 28 '18 at 8:35
i dont have access to modify jira whitelist.
– Divakar R
Nov 28 '18 at 8:35
You can't fetch data from something you don't have access to.
– SBimochan
Nov 28 '18 at 14:40
You can't fetch data from something you don't have access to.
– SBimochan
Nov 28 '18 at 14:40
add a comment |
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 8:35
onurkaya.onurkaya.
166
add a comment |
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 8:35
onurkaya.onurkaya.
166
add a comment |
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 8:35
onurkaya.onurkaya.
166
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 8:35
onurkaya.onurkaya.
166
answered Nov 28 '18 at 8:35
onurkaya.onurkaya.
166
answered Nov 28 '18 at 8:35
onurkaya.onurkaya.
166
answered Nov 28 '18 at 8:35
onurkaya.onurkaya.
166
166
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53515134%2fcors-error-unable-to-fetch-rest-api-from-jira-using-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
– Quentin
Nov 28 '18 at 8:38
Are you sending the fetch request to a backend express file? If so please display that.
– Peter rosevelt
Nov 28 '18 at 9:21
no. i am not sending fetch request to backend express
– Divakar R
Nov 28 '18 at 10:09