Method PUT is not allowed by Access-Control-Allow-Methods in preflight response FLASK CORS
GETs are working right. I can't seem to make PUT work and I fear POST is not working as well.
Kept on having the error
Access to XMLHttpRequest at '<...>' from origin 'https://localhost:3000' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
I have a local webapp that calls on an external api which means CORS will be one of the hurdles I should tackle.
Here's my flask code.
@blueprint.route('/profiles/<oi_id>', methods=['POST'])
@cross_origin(send_wildcard=True, methods=['POST', 'OPTIONS'])
def create_checkin_profile(oi_id):
return jsonify(cph.create_owner_profile_info(oi_id, json.loads(request.data)))
@blueprint.route('/profiles/<oi_id>', methods=['PUT'])
@cross_origin(send_wildcard=True, methods=['PUT', 'OPTIONS'])
def edit_checkin_profile(oi_id):
return jsonify(cph.edit_owner_profile_info(oi_id, json.loads(request.data)))
It's quite confusing since I'm pretty sure I allowed PUT.
I'm using axios for this on a react app. Here's my call-api function.
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
Accept: "application/json",
},
});
python reactjs flask axios flask-cors
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
add a comment |
GETs are working right. I can't seem to make PUT work and I fear POST is not working as well.
Kept on having the error
Access to XMLHttpRequest at '<...>' from origin 'https://localhost:3000' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
I have a local webapp that calls on an external api which means CORS will be one of the hurdles I should tackle.
Here's my flask code.
@blueprint.route('/profiles/<oi_id>', methods=['POST'])
@cross_origin(send_wildcard=True, methods=['POST', 'OPTIONS'])
def create_checkin_profile(oi_id):
return jsonify(cph.create_owner_profile_info(oi_id, json.loads(request.data)))
@blueprint.route('/profiles/<oi_id>', methods=['PUT'])
@cross_origin(send_wildcard=True, methods=['PUT', 'OPTIONS'])
def edit_checkin_profile(oi_id):
return jsonify(cph.edit_owner_profile_info(oi_id, json.loads(request.data)))
It's quite confusing since I'm pretty sure I allowed PUT.
I'm using axios for this on a react app. Here's my call-api function.
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
Accept: "application/json",
},
});
python reactjs flask axios flask-cors
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
From React side, it appears to me your implementations are correct, please check how to handle cors in flask.
– Satyaki
Nov 26 '18 at 11:43
I just used Flask-Cors. @cross_origin() decorator in which it should handle the CORS requests nicely. That's why I'm confused why it doesn't work.
– Franrey Saycon
Nov 26 '18 at 11:54
I'm not a python guy. So can't confirm but this might help you : stackoverflow.com/questions/39550920/…
– Satyaki
Nov 26 '18 at 11:57
add a comment |
GETs are working right. I can't seem to make PUT work and I fear POST is not working as well.
Kept on having the error
Access to XMLHttpRequest at '<...>' from origin 'https://localhost:3000' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
I have a local webapp that calls on an external api which means CORS will be one of the hurdles I should tackle.
Here's my flask code.
@blueprint.route('/profiles/<oi_id>', methods=['POST'])
@cross_origin(send_wildcard=True, methods=['POST', 'OPTIONS'])
def create_checkin_profile(oi_id):
return jsonify(cph.create_owner_profile_info(oi_id, json.loads(request.data)))
@blueprint.route('/profiles/<oi_id>', methods=['PUT'])
@cross_origin(send_wildcard=True, methods=['PUT', 'OPTIONS'])
def edit_checkin_profile(oi_id):
return jsonify(cph.edit_owner_profile_info(oi_id, json.loads(request.data)))
It's quite confusing since I'm pretty sure I allowed PUT.
I'm using axios for this on a react app. Here's my call-api function.
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
Accept: "application/json",
},
});
python reactjs flask axios flask-cors
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
GETs are working right. I can't seem to make PUT work and I fear POST is not working as well.
Kept on having the error
Access to XMLHttpRequest at '<...>' from origin 'https://localhost:3000' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
I have a local webapp that calls on an external api which means CORS will be one of the hurdles I should tackle.
Here's my flask code.
@blueprint.route('/profiles/<oi_id>', methods=['POST'])
@cross_origin(send_wildcard=True, methods=['POST', 'OPTIONS'])
def create_checkin_profile(oi_id):
return jsonify(cph.create_owner_profile_info(oi_id, json.loads(request.data)))
@blueprint.route('/profiles/<oi_id>', methods=['PUT'])
@cross_origin(send_wildcard=True, methods=['PUT', 'OPTIONS'])
def edit_checkin_profile(oi_id):
return jsonify(cph.edit_owner_profile_info(oi_id, json.loads(request.data)))
It's quite confusing since I'm pretty sure I allowed PUT.
I'm using axios for this on a react app. Here's my call-api function.
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
Accept: "application/json",
},
});
python reactjs flask axios flask-cors
python reactjs flask axios flask-cors
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
asked Nov 26 '18 at 11:29
Franrey SayconFranrey Saycon
1099
1099
From React side, it appears to me your implementations are correct, please check how to handle cors in flask.
– Satyaki
Nov 26 '18 at 11:43
I just used Flask-Cors. @cross_origin() decorator in which it should handle the CORS requests nicely. That's why I'm confused why it doesn't work.
– Franrey Saycon
Nov 26 '18 at 11:54
I'm not a python guy. So can't confirm but this might help you : stackoverflow.com/questions/39550920/…
– Satyaki
Nov 26 '18 at 11:57
add a comment |
From React side, it appears to me your implementations are correct, please check how to handle cors in flask.
– Satyaki
Nov 26 '18 at 11:43
I just used Flask-Cors. @cross_origin() decorator in which it should handle the CORS requests nicely. That's why I'm confused why it doesn't work.
– Franrey Saycon
Nov 26 '18 at 11:54
I'm not a python guy. So can't confirm but this might help you : stackoverflow.com/questions/39550920/…
– Satyaki
Nov 26 '18 at 11:57
From React side, it appears to me your implementations are correct, please check how to handle cors in flask.
– Satyaki
Nov 26 '18 at 11:43
From React side, it appears to me your implementations are correct, please check how to handle cors in flask.
– Satyaki
Nov 26 '18 at 11:43
I just used Flask-Cors. @cross_origin() decorator in which it should handle the CORS requests nicely. That's why I'm confused why it doesn't work.
– Franrey Saycon
Nov 26 '18 at 11:54
I just used Flask-Cors. @cross_origin() decorator in which it should handle the CORS requests nicely. That's why I'm confused why it doesn't work.
– Franrey Saycon
Nov 26 '18 at 11:54
I'm not a python guy. So can't confirm but this might help you : stackoverflow.com/questions/39550920/…
– Satyaki
Nov 26 '18 at 11:57
I'm not a python guy. So can't confirm but this might help you : stackoverflow.com/questions/39550920/…
– Satyaki
Nov 26 '18 at 11:57
add a comment |
1 Answer
1
active
oldest
votes
Alright I fixed this.
Apparently according to the docs I have to specify "Content-Type" on the cross origin requests. Like so:
@cross_origin(allow_headers=['Content-Type'])
Don't be fooled by the default of allow all. You need to specify this apparently.
I have to remove unnecessary headers such as Accept and Access-Control-Allow-Origin. Updating my axios like so:
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Content-Type": "application/json",
},
});
BONUS:
I ran into a problem if my api calls returned a non 200 response with preflight request, the response body becomes null. I just added these lines of code on my main application. I needed the body for the details of the error is there.
@app.after_request
def set_cors_header(response):
response.headers['Access-Control-Allow-Origin'] = '*'
return response
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
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%2f53480164%2fmethod-put-is-not-allowed-by-access-control-allow-methods-in-preflight-response%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
Alright I fixed this.
Apparently according to the docs I have to specify "Content-Type" on the cross origin requests. Like so:
@cross_origin(allow_headers=['Content-Type'])
Don't be fooled by the default of allow all. You need to specify this apparently.
I have to remove unnecessary headers such as Accept and Access-Control-Allow-Origin. Updating my axios like so:
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Content-Type": "application/json",
},
});
BONUS:
I ran into a problem if my api calls returned a non 200 response with preflight request, the response body becomes null. I just added these lines of code on my main application. I needed the body for the details of the error is there.
@app.after_request
def set_cors_header(response):
response.headers['Access-Control-Allow-Origin'] = '*'
return response
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
add a comment |
Alright I fixed this.
Apparently according to the docs I have to specify "Content-Type" on the cross origin requests. Like so:
@cross_origin(allow_headers=['Content-Type'])
Don't be fooled by the default of allow all. You need to specify this apparently.
I have to remove unnecessary headers such as Accept and Access-Control-Allow-Origin. Updating my axios like so:
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Content-Type": "application/json",
},
});
BONUS:
I ran into a problem if my api calls returned a non 200 response with preflight request, the response body becomes null. I just added these lines of code on my main application. I needed the body for the details of the error is there.
@app.after_request
def set_cors_header(response):
response.headers['Access-Control-Allow-Origin'] = '*'
return response
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
add a comment |
Alright I fixed this.
Apparently according to the docs I have to specify "Content-Type" on the cross origin requests. Like so:
@cross_origin(allow_headers=['Content-Type'])
Don't be fooled by the default of allow all. You need to specify this apparently.
I have to remove unnecessary headers such as Accept and Access-Control-Allow-Origin. Updating my axios like so:
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Content-Type": "application/json",
},
});
BONUS:
I ran into a problem if my api calls returned a non 200 response with preflight request, the response body becomes null. I just added these lines of code on my main application. I needed the body for the details of the error is there.
@app.after_request
def set_cors_header(response):
response.headers['Access-Control-Allow-Origin'] = '*'
return response
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
Alright I fixed this.
Apparently according to the docs I have to specify "Content-Type" on the cross origin requests. Like so:
@cross_origin(allow_headers=['Content-Type'])
Don't be fooled by the default of allow all. You need to specify this apparently.
I have to remove unnecessary headers such as Accept and Access-Control-Allow-Origin. Updating my axios like so:
axios({
method: 'PUT',
url: url,
timeout: 3000,
data: data,
headers: {
"Content-Type": "application/json",
},
});
BONUS:
I ran into a problem if my api calls returned a non 200 response with preflight request, the response body becomes null. I just added these lines of code on my main application. I needed the body for the details of the error is there.
@app.after_request
def set_cors_header(response):
response.headers['Access-Control-Allow-Origin'] = '*'
return response
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
answered Nov 27 '18 at 6:36
Franrey SayconFranrey Saycon
1099
1099
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%2f53480164%2fmethod-put-is-not-allowed-by-access-control-allow-methods-in-preflight-response%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
From React side, it appears to me your implementations are correct, please check how to handle cors in flask.
– Satyaki
Nov 26 '18 at 11:43
I just used Flask-Cors. @cross_origin() decorator in which it should handle the CORS requests nicely. That's why I'm confused why it doesn't work.
– Franrey Saycon
Nov 26 '18 at 11:54
I'm not a python guy. So can't confirm but this might help you : stackoverflow.com/questions/39550920/…
– Satyaki
Nov 26 '18 at 11:57