I'm struggling with the issue that my web app does not run in Safari. My frontend that I have implemented with javascript runs on a localhost (Port 3000) and communicates with a Python backend API (FastAPI) also running on a localhost (Port 8000). Everything works fine in Chrome or Firefox, but does not work in Safari. I have searched a lot online but couldn't fine a working solution yet (more information below).
Error message I get in Safari Web Inspector:
[Warning] [blocked] The page at https://localhost:3000/#/app was not allowed to display insecure content from http://localhost:8000/llmodels/. (taskpane.js, line 62967)
[Error] Not allowed to request resource
tryCatch (taskpane.js:62967:2409)
(anonymous function) (taskpane.js:62967:1973)
asyncGeneratorStep (taskpane.js:62969:104)
_next (taskpane.js:62971:213)
(anonymous function) (taskpane.js:62971:370)
initializePromise (taskpane.js:26483)
Promise (taskpane.js:26911)
(anonymous function) (taskpane.js:62971:109)
tryCatch (taskpane.js:59336:2409)
(anonymous function) (taskpane.js:59336:1973)
asyncGeneratorStep (taskpane.js:59338:104)
_next (taskpane.js:59340:213)
(anonymous function) (taskpane.js:59340:370)
initializePromise (taskpane.js:26483)
Promise (taskpane.js:26911)
(anonymous function) (taskpane.js:59340:109)
componentWillMount (taskpane.js:59867)
callComponentWillMount (taskpane.js:45759)
mountClassInstance (taskpane.js:45853)
updateClassComponent (taskpane.js:50401)
beginWork$1 (taskpane.js:56910)
performUnitOfWork (taskpane.js:55749)
workLoopSync (taskpane.js:55677)
renderRootSync (taskpane.js:55640)
performSyncWorkOnRoot (taskpane.js:55263)
performSyncWorkOnRoot
(anonymous function) (taskpane.js:44302)
unstable_runWithPriority (taskpane.js:76263)
flushSyncCallbackQueueImpl (taskpane.js:44297)
flushSyncCallbackQueue (taskpane.js:44284)
scheduleUpdateOnFiber (taskpane.js:54863)
updateContainer (taskpane.js:58452)
legacyRenderSubtreeIntoContainer (taskpane.js:59007)
render (taskpane.js:62764)
(anonymous function) (taskpane.js:62780)
(anonymous function) (office.js:76:23256)
t (office.js:76:22656)
s (office.js:76:30352)
c (office.js:76:4170)
(anonymous function) (office.js:76:4259)
z (office.js:76:30830)
m (office.js:76:6322)
[Error] Fetch API cannot load http://localhost:8000/llmodels/ due to access control checks.
tryCatch (taskpane.js:62967:2409)
(anonymous function) (taskpane.js:62967:1973)
asyncGeneratorStep (taskpane.js:62969:104)
_next (taskpane.js:62971:213)
(anonymous function) (taskpane.js:62971:370)
initializePromise (taskpane.js:26483)
Promise (taskpane.js:26911)
(anonymous function) (taskpane.js:62971:109)
tryCatch (taskpane.js:59336:2409)
(anonymous function) (taskpane.js:59336:1973)
asyncGeneratorStep (taskpane.js:59338:104)
_next (taskpane.js:59340:213)
(anonymous function) (taskpane.js:59340:370)
initializePromise (taskpane.js:26483)
Promise (taskpane.js:26911)
(anonymous function) (taskpane.js:59340:109)
componentWillMount (taskpane.js:59867)
callComponentWillMount (taskpane.js:45759)
mountClassInstance (taskpane.js:45853)
updateClassComponent (taskpane.js:50401)
beginWork$1 (taskpane.js:56910)
performUnitOfWork (taskpane.js:55749)
workLoopSync (taskpane.js:55677)
renderRootSync (taskpane.js:55640)
performSyncWorkOnRoot (taskpane.js:55263)
performSyncWorkOnRoot
(anonymous function) (taskpane.js:44302)
unstable_runWithPriority (taskpane.js:76263)
flushSyncCallbackQueueImpl (taskpane.js:44297)
flushSyncCallbackQueue (taskpane.js:44284)
scheduleUpdateOnFiber (taskpane.js:54863)
updateContainer (taskpane.js:58452)
legacyRenderSubtreeIntoContainer (taskpane.js:59007)
render (taskpane.js:62764)
(anonymous function) (taskpane.js:62780)
(anonymous function) (office.js:76:23256)
t (office.js:76:22656)
s (office.js:76:30352)
c (office.js:76:4170)
(anonymous function) (office.js:76:4259)
z (office.js:76:30830)
m (office.js:76:6322)
Frontend call:
async getModels() {
const response = await fetch("http://localhost:8000/llmodels/",{
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Methods": "GET, POST, DELETE, OPTIONS",
},
});
const returner = await response.json();
return returner;
};
Backend Setup:
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(docs_url="/docs/")
origins = [
"http://localhost:3000",
"https://localhost:3000",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["GET", "POST", "DELETE", "OPTIONS"],
allow_headers=["Content-Type", "x-requested-with", "Access-Control-Allow-Methods"],
)
@app.get("/llmodels/")
def get_models():
llm_models = {"model1": "model1", "model2": "model2"}
return models
Does anyone know a solution for this? Please let me know whether you need further information!
Thanks in advance!
- Johannes
One related post is this: Safari: "Fetch API cannot load due to access control checks" after reload But here the issue is rather due to cached files. In my case the App does also not run in incognito or on the first opening after deleting the cache (all in Safari).
I have also seen that Safari does not allow wildcard in the cors middleware for Access-Control-Allow-Methods and Access-Control-Allow-Headers, so I have restricted those. Also with the restrictions it works in Chrome but not Safari.
