SOLVED - Axios / quasar.config.js proxy - In Chrome api requests are working, In Firefox/Opera CORS issue

[Mausino]

Hello, i stuck with cors issue… and i dont know how solve it for Firefox,Opera if on Chrome is working everything fine

https://we.tl/t-wwQ5A83xJ6 (1MB) Here is the project which i created for 2 different api resources…

1. Node server -> cd q-app-v2 -> cd base-server-master -> yarn install (npm install) -> node index.js (will create api endpoint http://localhost:3001/api/resources)
2. Placeholder online api endpoint

To test it:
cd q-app-v2 -> yarn install (npm install) -> quasar dev

The main problem also here is that in Chrome is working everything fine… but on Firefox,Opera there is cors issue…

[dobbel]

@Mausino

If you set a proxy for posts and api in devServer, then in your Quasar app you must use your Quasar’s host:port as baseUrl for the actual axios requests.

This works , assuming you run your Quasar app on port 8080:

import axios from 'axios';

export function getDataNode()
{
  return axios
    .get('http://localhost:8080/api/resources') // can be replace by `/api/resources`
    .then( yy => yy.data)
}

export function getDataJsonPlaceholder()
{
  return axios

    .get('http://localhost:8080/posts') // can be replace by `/posts`
    .then( xx => xx.data)
}

 proxy: {
        '/api': {
          target: 'http://localhost:3001',
          changeOrigin: true,
        },
        '/post': {
          target: 'https://jsonplaceholder.typicode.com',
          changeOrigin: true,
        },
      },

In your original code the proxies where not used at all, because you used the proxy target url for the axios request.

btw I also had cors issues on chrome.

[Mausino]

@dobbel thank you so much

Your suggestions fix all issues which i faced… you move me so much forward

Miky

[Mausino]

If somebody want fixed source code, i created the github repo… that will save lots of time, if starts with axios in Quasar v1

https://github.com/Mausino/quasar-proxy-axios-api-request