axios put not happening throwing forbidden
- I am new to axios.
- I am trying to do an update to my api through put request. But I am getting the below error.
OPTIONS http://t/Sports/1 403 (Forbidden) - I am researched so many sites for axios but still I am not able to fix the issue
- can you tell me how to fix it.
- providing my code snippet below
- I am trying to do an update to my api through put request. But I am getting the below error.
<div className={classes.SportsEditTabContentFooter}>
<div>Sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button variant="outlined" onClick={this.saveSports} className={classes.button}>
Save Sports test
</Button>
</div>
</div>
saveSports = () => {
console.log("saveSports---->");
console.log(this.state.Sports);
let saveSports = this.state.Sports;
saveSports.updatedBy = 'raj';
saveSports.priceRuleDescription = "test description";
axios
.put(
'http://t/Sports/' + saveSports.SportsID,
saveSports,
{ headers: { 'Content-Type': 'application/json' } }
)
.then(r => console.log(r))
.catch(e => console.log(e));
//this.toggleDrawer("right", false);
this.setState({ right: false });
this.setState({ snackBarOpen: true });
setTimeout(() => {
this.setState({ snackBarOpen: false });
}, 6000)
};
javascript html reactjs api axios
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
add a comment |
- I am new to axios.
- I am trying to do an update to my api through put request. But I am getting the below error.
OPTIONS http://t/Sports/1 403 (Forbidden) - I am researched so many sites for axios but still I am not able to fix the issue
- can you tell me how to fix it.
- providing my code snippet below
- I am trying to do an update to my api through put request. But I am getting the below error.
<div className={classes.SportsEditTabContentFooter}>
<div>Sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button variant="outlined" onClick={this.saveSports} className={classes.button}>
Save Sports test
</Button>
</div>
</div>
saveSports = () => {
console.log("saveSports---->");
console.log(this.state.Sports);
let saveSports = this.state.Sports;
saveSports.updatedBy = 'raj';
saveSports.priceRuleDescription = "test description";
axios
.put(
'http://t/Sports/' + saveSports.SportsID,
saveSports,
{ headers: { 'Content-Type': 'application/json' } }
)
.then(r => console.log(r))
.catch(e => console.log(e));
//this.toggleDrawer("right", false);
this.setState({ right: false });
this.setState({ snackBarOpen: true });
setTimeout(() => {
this.setState({ snackBarOpen: false });
}, 6000)
};
javascript html reactjs api axios
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
add a comment |
- I am new to axios.
- I am trying to do an update to my api through put request. But I am getting the below error.
OPTIONS http://t/Sports/1 403 (Forbidden) - I am researched so many sites for axios but still I am not able to fix the issue
- can you tell me how to fix it.
- providing my code snippet below
- I am trying to do an update to my api through put request. But I am getting the below error.
<div className={classes.SportsEditTabContentFooter}>
<div>Sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button variant="outlined" onClick={this.saveSports} className={classes.button}>
Save Sports test
</Button>
</div>
</div>
saveSports = () => {
console.log("saveSports---->");
console.log(this.state.Sports);
let saveSports = this.state.Sports;
saveSports.updatedBy = 'raj';
saveSports.priceRuleDescription = "test description";
axios
.put(
'http://t/Sports/' + saveSports.SportsID,
saveSports,
{ headers: { 'Content-Type': 'application/json' } }
)
.then(r => console.log(r))
.catch(e => console.log(e));
//this.toggleDrawer("right", false);
this.setState({ right: false });
this.setState({ snackBarOpen: true });
setTimeout(() => {
this.setState({ snackBarOpen: false });
}, 6000)
};
javascript html reactjs api axios
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
- I am new to axios.
- I am trying to do an update to my api through put request. But I am getting the below error.
OPTIONS http://t/Sports/1 403 (Forbidden) - I am researched so many sites for axios but still I am not able to fix the issue
- can you tell me how to fix it.
- providing my code snippet below
- I am trying to do an update to my api through put request. But I am getting the below error.
<div className={classes.SportsEditTabContentFooter}>
<div>Sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button variant="outlined" onClick={this.saveSports} className={classes.button}>
Save Sports test
</Button>
</div>
</div>
saveSports = () => {
console.log("saveSports---->");
console.log(this.state.Sports);
let saveSports = this.state.Sports;
saveSports.updatedBy = 'raj';
saveSports.priceRuleDescription = "test description";
axios
.put(
'http://t/Sports/' + saveSports.SportsID,
saveSports,
{ headers: { 'Content-Type': 'application/json' } }
)
.then(r => console.log(r))
.catch(e => console.log(e));
//this.toggleDrawer("right", false);
this.setState({ right: false });
this.setState({ snackBarOpen: true });
setTimeout(() => {
this.setState({ snackBarOpen: false });
}, 6000)
};
javascript html reactjs api axios
javascript html reactjs api axios
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
asked Nov 24 '18 at 23:53
inji injiinji inji
7210
7210
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Since you try communicating different domain because of CORS browser automatically sends OPTIONS request. And backend does not expect this so it returns 403 for whatever reason.
Having this in mind your need
- either change your client code to make request simple
- place your client code to be run on the same domain where backend runs
- run CORS proxy server as the same domain where client code is hosted - since OPTIONS aka preflight request is sent just by browser your code in, say, Node, does not require that
- update target backend code to handle preflight OPTIONS request correctly
Each variant is enough to solve your issue. But it's up to you to decide what is more convenient in your case
PS just in case: no, there is no way to avoid preflight OPTIONS request to be sent by configuring axios, replacing axios with different package, fetch() call or native XmlHttpRequest or any other easy change in your client code since it's fundamental (security!) feature of modern web browsers
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
do you have any demo where I can refer it
– inji inji
Nov 25 '18 at 1:31
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%2f53463454%2faxios-put-not-happening-throwing-forbidden%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Since you try communicating different domain because of CORS browser automatically sends OPTIONS request. And backend does not expect this so it returns 403 for whatever reason.
Having this in mind your need
- either change your client code to make request simple
- place your client code to be run on the same domain where backend runs
- run CORS proxy server as the same domain where client code is hosted - since OPTIONS aka preflight request is sent just by browser your code in, say, Node, does not require that
- update target backend code to handle preflight OPTIONS request correctly
Each variant is enough to solve your issue. But it's up to you to decide what is more convenient in your case
PS just in case: no, there is no way to avoid preflight OPTIONS request to be sent by configuring axios, replacing axios with different package, fetch() call or native XmlHttpRequest or any other easy change in your client code since it's fundamental (security!) feature of modern web browsers
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
do you have any demo where I can refer it
– inji inji
Nov 25 '18 at 1:31
add a comment |
Since you try communicating different domain because of CORS browser automatically sends OPTIONS request. And backend does not expect this so it returns 403 for whatever reason.
Having this in mind your need
- either change your client code to make request simple
- place your client code to be run on the same domain where backend runs
- run CORS proxy server as the same domain where client code is hosted - since OPTIONS aka preflight request is sent just by browser your code in, say, Node, does not require that
- update target backend code to handle preflight OPTIONS request correctly
Each variant is enough to solve your issue. But it's up to you to decide what is more convenient in your case
PS just in case: no, there is no way to avoid preflight OPTIONS request to be sent by configuring axios, replacing axios with different package, fetch() call or native XmlHttpRequest or any other easy change in your client code since it's fundamental (security!) feature of modern web browsers
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
do you have any demo where I can refer it
– inji inji
Nov 25 '18 at 1:31
add a comment |
Since you try communicating different domain because of CORS browser automatically sends OPTIONS request. And backend does not expect this so it returns 403 for whatever reason.
Having this in mind your need
- either change your client code to make request simple
- place your client code to be run on the same domain where backend runs
- run CORS proxy server as the same domain where client code is hosted - since OPTIONS aka preflight request is sent just by browser your code in, say, Node, does not require that
- update target backend code to handle preflight OPTIONS request correctly
Each variant is enough to solve your issue. But it's up to you to decide what is more convenient in your case
PS just in case: no, there is no way to avoid preflight OPTIONS request to be sent by configuring axios, replacing axios with different package, fetch() call or native XmlHttpRequest or any other easy change in your client code since it's fundamental (security!) feature of modern web browsers
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
Since you try communicating different domain because of CORS browser automatically sends OPTIONS request. And backend does not expect this so it returns 403 for whatever reason.
Having this in mind your need
- either change your client code to make request simple
- place your client code to be run on the same domain where backend runs
- run CORS proxy server as the same domain where client code is hosted - since OPTIONS aka preflight request is sent just by browser your code in, say, Node, does not require that
- update target backend code to handle preflight OPTIONS request correctly
Each variant is enough to solve your issue. But it's up to you to decide what is more convenient in your case
PS just in case: no, there is no way to avoid preflight OPTIONS request to be sent by configuring axios, replacing axios with different package, fetch() call or native XmlHttpRequest or any other easy change in your client code since it's fundamental (security!) feature of modern web browsers
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
answered Nov 25 '18 at 0:27
skyboyerskyboyer
3,82311229
3,82311229
do you have any demo where I can refer it
– inji inji
Nov 25 '18 at 1:31
add a comment |
do you have any demo where I can refer it
– inji inji
Nov 25 '18 at 1:31
do you have any demo where I can refer it
– inji inji
Nov 25 '18 at 1:31
do you have any demo where I can refer it
– inji inji
Nov 25 '18 at 1:31
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%2f53463454%2faxios-put-not-happening-throwing-forbidden%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
