Lyft-API - GET from Localhost

Question

I have been trying to figure out how to get this Vue project to work with the Lyft API. I have been able to get an Auth Token successfully created from the three-legged procedure, but I am unable to get the available drive types https://api.lyft.com/v1/ridetypes endpoint from the localhost:8080. It does work on Postman.

It keeps stating:

Access to XMLHttpRequest at 'https://api.lyft.com/v1/ridetypes?lat=37.7752315&lng=-122.418075' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I had tried doing a proxy using a vue.config.js file:

module.exports = {
    devServer: {
        proxy: {
            '/lyftapi': {
                target: 'https://api.lyft.com/v1',
                ws: true,
                changeOrigin: true
            }
        }
    }
}

I been around other parts of Stack Overflow, and this is the closest thing to my problem, but no answers.

CORS error in Lyft API started recently

Any suggestions?

Axios Get Call

axios.get('/ridetypes', {
    baseURL: 'https://api.lyft.com/v1',
    headers: {
        'Authorization': this.lyftToken,
    },
    params: {
        lat: lat.toString(),
        lng: long.toString()
    }
})

If it means anything, I am able to make successful GET calls to retrieve Uber products, but not so much the Auth Token (unless its from Postman).

Answer 1

Lyft-API has disabled CORS, this means that browsers will block calls to api.lyft.com.

Vue won't be able to do anyting about this as this is a browser security policy.

Luckily there is nothing from stoping you to make this call from your own server.

One solution is to forward the request and response using your own server. You make a call to your server, the server makes a call to lyft, waits for the response and then responds your request.

This is not a vue only solution.