I'm having an issue trying to combine a Vue + Axios app with an express backend with Passport using the Google Strategy OAuth2.
My express server is on localhost:5000 and my vue-cli webpack dev server is on localhost:3000. I am using the webpack proxyTable option to proxy requests from /api to localhost:5000/api. Supposedly it also deals with cors. If I use a normal hyperlink in my vue app like <a href="/api/auth/google">Auth with Google</a>, it works as expected, however if I try to use axios like:
async authGoogle() {
const response = await axios.get('/api/auth/google')
console.log(response)
}
I get this error from the google api callback:
Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Fauth%2Fgoogle%2Fcallback&scope=profile%20email&client_id={client_id}:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.
These are the api routes:
app.get(
'/api/auth/google',
passport.authenticate('google', { scope: ['profile', 'email'] })
)
app.get(
'/api/auth/google/callback',
passport.authenticate('google'),
function(req, res) {
res.json({ success: true })
}
)
How can I make axios work correctly in this situation?
