CORS error between front and back-end both deployed on Heroku-CodePudding

I have fastapi backend that is deployed on heroku.

Then I have a vueJs frontend... when I run my frontend on localhost, it consumes my deployed backend as intended. But when I run the hereoku deployed frontend, it triggers a CORS error.

[Error] Not allowed to request resource
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:5476)
    Promise
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:3329)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:9926)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:8256)
    (fonction anonyme) (app.300a0e8b.js:1:8475)
    asyncFunctionResume
    re (chunk-vendors.dadb741b.js:2282:11801)
    Fn (chunk-vendors.dadb741b.js:2282:29361)
    insert (chunk-vendors.dadb741b.js:2282:21037)
    O (chunk-vendors.dadb741b.js:2282:48055)
    (fonction anonyme) (chunk-vendors.dadb741b.js:2282:49366)
    (fonction anonyme) (chunk-vendors.dadb741b.js:2282:27206)
    i (chunk-vendors.dadb741b.js:2282:28010)
    (fonction anonyme) (chunk-vendors.dadb741b.js:2282:30902)
    ri (chunk-vendors.dadb741b.js:2282:30819)
    Dn (chunk-vendors.dadb741b.js:2282:28033)
    (fonction anonyme) (app.300a0e8b.js:1:9836)
    promiseReactionJob

[Error] XMLHttpRequest cannot load http://test-api.herokuapp.com/api/v3 due to access control checks.
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:5476)
    Promise
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:3329)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:9926)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:8256)
    (fonction anonyme) (app.300a0e8b.js:1:8475)
    asyncFunctionResume
    re (chunk-vendors.dadb741b.js:2282:11801)
    Fn (chunk-vendors.dadb741b.js:2282:29361)
    insert (chunk-vendors.dadb741b.js:2282:21037)
    O (chunk-vendors.dadb741b.js:2282:48055)
    (fonction anonyme) (chunk-vendors.dadb741b.js:2282:49366)
    (fonction anonyme) (chunk-vendors.dadb741b.js:2282:27206)
    i (chunk-vendors.dadb741b.js:2282:28010)
    (fonction anonyme) (chunk-vendors.dadb741b.js:2282:30902)
    ri (chunk-vendors.dadb741b.js:2282:30819)
    Dn (chunk-vendors.dadb741b.js:2282:28033)
    (fonction anonyme) (app.300a0e8b.js:1:9836)
    promiseReactionJob

[Error] Not allowed to request resource
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:5476)
    Promise
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:3329)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:9926)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:8256)
    (fonction anonyme) (app.300a0e8b.js:1:8592)
    asyncFunctionResume
    (fonction anonyme)
    promiseReactionJobWithoutPromise
    promiseReactionJob

[Error] XMLHttpRequest cannot load http://test-api.herokuapp.com/api/v2 due to access control checks.
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:5476)
    Promise
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:3329)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:9926)
    (fonction anonyme) (chunk-vendors.dadb741b.js:905:8256)
    (fonction anonyme) (app.300a0e8b.js:1:8592)
    asyncFunctionResume
    (fonction anonyme)
    promiseReactionJobWithoutPromise
    promiseReactionJob

I have set my CORS on the backend like this :

origins = [
    "https://test-front.herokuapp.com",
    "http://16.11.192.108:8080/",
    "http://localhost",
    "http://localhost:8080",
]


app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

My frontend api calls are like this :

await axios.get('http://test-api.herokuapp.com/api/v3')
      .then(response => (this.apiInfoV3 = response.data))
      .catch(error => console.log(error))

CodePudding user response：

As silly as it seems, what did the trick was simply to add an "s" to http in http://test-api.herokuapp.com/api/v3 like this:

await axios.get('https://test-api.herokuapp.com/api/v3')...