CORS error in Gitpod via Flask API but works on localhost-CodePudding

I have a public Gitlab repo to demonstrate the issue: https://gitlab.com/publ6/cors-is-my-friend

It can be used with Gitpod.

This is a mono-repo with a python Flask API exposing a single route accepting GET and POST requests:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/method', methods = ['GET', 'POST'])
def post_method():

    result = "result"

    return result

There is also a front app powered with vue-js (vite) calling the route twice: with GET request then with POST request:

<script setup>

import { ref, onMounted } from 'vue'
import { get, post } from 'axios'


var get_result = ref(`waiting for get results from `   import.meta.env.VITE_BACK_URL);
var post_result = ref(`waiting for post results from `   import.meta.env.VITE_BACK_URL);


onMounted(() => {
    getResult()
    postResult()
})

function getResult () {
    get(import.meta.env.VITE_BACK_URL   '/method', { withCredentials: true })
    .then(response => {                    
        get_result.value = response.data                    
    })
}

function postResult () {
    post(import.meta.env.VITE_BACK_URL   '/method', { withCredentials: true })
    .then(response => {                    
        post_result.value = response.data                    
    })
}

</script>

<template>

    <p>{{ get_result }}</p>
    <p>{{ post_result }}</p>

</template>

<style scoped>

</style>

Despite using the python lib "flask_cors", I got a CORS error when using within Gitpod (it works on localhost)

Access to XMLHttpRequest at 'https://3000-publ6-corsismyfriend-e65siyrdx0x.ws-eu31.gitpod.io/method' from origin 'https://8000-publ6-corsismyfriend-e65siyrdx0x.ws-eu31.gitpod.io' 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.

Failed to load resource: net::ERR_FAILED

Uncaught (in promise) Error: Network Error
at createError (axios.js:312:19)
at XMLHttpRequest.handleError (axios.js:606:18)

It worth noticing that I think Gitpod tests easily throw CORS errors even when it's not related to CORS.

CodePudding user response：

I don't have experience regarding GitPod but there is a discussion of private ports giving CORS errors in here https://community.gitpod.io/t/cors-issue-with-gitpod/1082/8