I have a FastAPI backend communicating with a Vue frontend deployed in separate projects. I cannot seem to get proper browser negotiation between the two outside of localhost deployments (they work fine when containerized and deployed on a single machine on localhost:. I tried first using the Cloud Run generated URL as a baseURL, but that didn’t work. I’ve added almost as many origins as I can think, went ahead and set up all the load balancers and domains with https, and same problem. Not sure if FastAPI is failing to reply with the correct header or if the Vue app is missing some config. CORS needs to die and better resource control frameworks put in place. Until the brains that be figure out something better, I guess this needs to work for modern browsers to play correctly.
Fast API snippet from main:
app = FastAPI()
# Add CORS middleware for frontend
origins = [
"http://localhost",
"http://localhost:8080",
"http://127.0.0.1",
"http://127.0.0.1:8080",
"https://api.domain.com", # cloud run backend
"https://alpha.domain.com", # cloud run frontend
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_origin_regex='https?://.*', <-- SHOULDN'T THIS BE THE DUMB WORKAROUND?
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
Vue main.js
import 'bootstrap/dist/css/bootstrap.css';
import { createApp } from "vue";
import axios from 'axios';
import App from './App.vue';
import router from './router';
import store from './store';
const app = createApp(App);
axios.defaults.withCredentials = true;
// axios.defaults.baseURL = "http://localhost:8000"; // the FastAPI backend
console.log("Defaulting to GCP location: https://api.domain.com/");
axios.defaults.baseURL = "https://api.domain.com/";
app.use(router);
app.use(store);
app.mount("#app");
Vue vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
- I tried wildcards in the FastAPI CORS setup.
- Tried various baseURLs.
- Tried moving everything behind a load balancer and using the production domain.
- Tried adding a DevServer: …allowedHosts wildcard in Vue
Again, this works if both the HTTP and the FastAPI servers are run from localhost on the same network. Does not work when deployed. Instead, I get this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.domain.com/ping. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Neither Axios GET or POST are working.