CODEWITHSUNDEEP
expressvue.jscorsaxios
Omer Ozer
Omer Ozer

Reputation: 465

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.

Upvotes: 1

Views: 2877

Answers (2)

Omer Ozer
Omer Ozer

Reputation: 465

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.

Upvotes: 1

Adeeb basheer
Adeeb basheer

Reputation: 1490

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();
});

Upvotes: 0

Related Questions