Mixing
Axios and Vue won't make an api call to my server , due to a cors policy issue
I have my cors setup in my express(Node) server like this:
server.options('*',cors());
server.use(cors());
and making the call on my Vue website like this
axios.default
.post(url, {
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
interests: this.interests,
targetURL: "https://www.joinvurchase.com/email-verified/",
poolID
})
But I get the following error:
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
I think the cors on my server is setup correctly because when I make a call using postman it works and returns Access-Control-Allow-Origin →* header. Also when I make a call on my website, it errors out almost instantly. So it may not even making it to my server. The exact same setup works when tested locally. The issue is present after both the server and the website are deployed to Heroku.
express vue.js cors axios
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
add a comment |
I have my cors setup in my express(Node) server like this:
server.options('*',cors());
server.use(cors());
and making the call on my Vue website like this
axios.default
.post(url, {
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
interests: this.interests,
targetURL: "https://www.joinvurchase.com/email-verified/",
poolID
})
But I get the following error:
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
I think the cors on my server is setup correctly because when I make a call using postman it works and returns Access-Control-Allow-Origin →* header. Also when I make a call on my website, it errors out almost instantly. So it may not even making it to my server. The exact same setup works when tested locally. The issue is present after both the server and the website are deployed to Heroku.
express vue.js cors axios
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
add a comment |
I have my cors setup in my express(Node) server like this:
server.options('*',cors());
server.use(cors());
and making the call on my Vue website like this
axios.default
.post(url, {
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
interests: this.interests,
targetURL: "https://www.joinvurchase.com/email-verified/",
poolID
})
But I get the following error:
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
I think the cors on my server is setup correctly because when I make a call using postman it works and returns Access-Control-Allow-Origin →* header. Also when I make a call on my website, it errors out almost instantly. So it may not even making it to my server. The exact same setup works when tested locally. The issue is present after both the server and the website are deployed to Heroku.
express vue.js cors axios
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
I have my cors setup in my express(Node) server like this:
server.options('*',cors());
server.use(cors());
and making the call on my Vue website like this
axios.default
.post(url, {
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
interests: this.interests,
targetURL: "https://www.joinvurchase.com/email-verified/",
poolID
})
But I get the following error:
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
I think the cors on my server is setup correctly because when I make a call using postman it works and returns Access-Control-Allow-Origin →* header. Also when I make a call on my website, it errors out almost instantly. So it may not even making it to my server. The exact same setup works when tested locally. The issue is present after both the server and the website are deployed to Heroku.
express vue.js cors axios
express vue.js cors axios
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
edited Jan 1 at 6:27
braaterAfrikaaner
1,070517
1,070517
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
asked Jan 1 at 6:17
Omer OzerOmer Ozer
13514
13514
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
can you try this, this solves cors issue for me
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "HEAD, OPTIONS, GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
add a comment |
I figured it out. I use google domains and I had a domain re-rout from "mydomain.com" to "www.mydomain.com". assuming this would work, I used my url as mydomain.com. Since these calls ended up getting rerouted, my calls were failing with Redirect is not allowed for a preflight request. . So i simply started adding www to my urls and the issue went away.
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
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%2f53993410%2faxios-and-vue-wont-make-an-api-call-to-my-server-due-to-a-cors-policy-issue%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
can you try this, this solves cors issue for me
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "HEAD, OPTIONS, GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
add a comment |
can you try this, this solves cors issue for me
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "HEAD, OPTIONS, GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
add a comment |
can you try this, this solves cors issue for me
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "HEAD, OPTIONS, GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
can you try this, this solves cors issue for me
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "HEAD, OPTIONS, GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
answered Jan 1 at 12:05
Adeeb basheerAdeeb basheer
868615
868615
add a comment |
add a comment |
I figured it out. I use google domains and I had a domain re-rout from "mydomain.com" to "www.mydomain.com". assuming this would work, I used my url as mydomain.com. Since these calls ended up getting rerouted, my calls were failing with Redirect is not allowed for a preflight request. . So i simply started adding www to my urls and the issue went away.
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
add a comment |
I figured it out. I use google domains and I had a domain re-rout from "mydomain.com" to "www.mydomain.com". assuming this would work, I used my url as mydomain.com. Since these calls ended up getting rerouted, my calls were failing with Redirect is not allowed for a preflight request. . So i simply started adding www to my urls and the issue went away.
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
add a comment |
I figured it out. I use google domains and I had a domain re-rout from "mydomain.com" to "www.mydomain.com". assuming this would work, I used my url as mydomain.com. Since these calls ended up getting rerouted, my calls were failing with Redirect is not allowed for a preflight request. . So i simply started adding www to my urls and the issue went away.
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
I figured it out. I use google domains and I had a domain re-rout from "mydomain.com" to "www.mydomain.com". assuming this would work, I used my url as mydomain.com. Since these calls ended up getting rerouted, my calls were failing with Redirect is not allowed for a preflight request. . So i simply started adding www to my urls and the issue went away.
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
answered Jan 1 at 20:40
Omer OzerOmer Ozer
13514
13514
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%2f53993410%2faxios-and-vue-wont-make-an-api-call-to-my-server-due-to-a-cors-policy-issue%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
