部署在Heroku上的前端和后端之间的CORS错误

Question

我有部署在 heroku 上的快速api 后端。

然后我有一个 vueJs 前端...当我运行我的前端在本地主机上时，它会按预期使用我部署的后端。但是当我运行 hereoku 部署前端时，它触发了 CORS 错误。

[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

我在后端设置了我的 CORS :

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=["*"],
)

我的前端 api 调用是这样的：

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

Answer 1

虽然看起来很傻，但诀窍就是在 http://test-api.herokuapp.com/api/v3 中的 http 中添加一个“s”，如下所示：

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

部署在Heroku上的前端和后端之间的CORS错误

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

heroku

vue.js

fastapi