CORS problem



  • Hi

    • quasar-cli@0.17.23
    • quasar-extras@2.0.9
    • quasar-framework@0.17.19
    • axios@0.18.0

    My app consumes two apis:

    • A (http) and
    • B (https Let’s Encrypt) for user validation
      Both apis with CORS headers:

    response.headers[“Access-Control-Allow-Origin”] = "*"
    response.headers[“Access-Control-Allow-Credentials”] = "true"
    response.headers[“Access-Control-Allow-Methods”] = "OPTIONS, GET, POST, PUT, PATCH, DELETE"
    response.headers[“Access-Control-Allow-Headers”] = “Origin, Content-Type, Accept, Authorization”

    1. with proxy table in development mode works fine both apis
    2. build for electron also works fine
    3. creating the apk for android, api A works fine, B does not work (CORS problem)

    I’m confused that the electron works fine and the android app fails. I do not know if it will be related to the certificate of let’s encrypt.

    Best regards
    Jose



  • I’ve fixed it temporarily by creating a proxy in domain A. But I do not like it’s solution.

    Jose



  • This is already off-topic, but I want to provide some more information.
    Both the api and the front are being developed by me.

    the validation of the user in the api use the header Authorization: Bearer my_token
    This validation I can enable / disable

    To the header I inject it with:
    axios.defaults.headers.common [‘Authorization’] = ‘Bearer’ + my_token

    after login.

    The following happens:

    1. Without the header Authorization the api works well:
      a) with validation disabled returns the data.
      b) with validation enabled returns 401 not authorized

    The problem happens when I inject the header, in both cases, a) and b), I get the denial of cross resource

    I tried this out of a quasar app with axes and with jquery and the same thing happens:

    <script>

    function test(){
    axios.defaults.headers.common[‘Authorization’] = ‘Bearer my-token’;

    axios.get('myurl')
          .then((response) => {
            console.log(response.data.data);
          })
          .catch((error) => {
            console.log(error.response.data);
          })
    

    }
    </script>