Safari cannot load local js file. Reports cross-origin error

Question

I am trying to import a local js file in my index page. It works in Chrome and Firefox, but Safari is showing an error message.

Blocked https://example.com/js/i18next.js from asking for credentials because it is a cross-origin request.
https://example.com/js/i18next.js

index.php

<?php include "global-php-scripts.php"; ?>
<!DOCTYPE html>
<html lang="<?=$htmlLang?>">
<head>
  <title>mySite</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8" />
  <meta name="keywords" />
  <?php include "js-imports.php"; ?>
  <!-- localization-->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-xhr-backend/3.2.2/i18nextXHRBackend.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-locize-backend/2.2.2/i18nextLocizeBackend.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/2.0.22/i18next.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/4.0.1/i18nextBrowserLanguageDetector.min.js"></script> -->
  <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>


  <script src="https://cdn.jsdelivr.net/npm/loc-i18next@0.1.4/loc-i18next.min.js"></script>

  <! -- THIS FAILS!!! -->
  <script src="/js/i18next.js" type="module"></script>
  <! -- /THIS FAILS!!! -->

  <!-- end localization -->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Roboto:700&display=swap" rel="stylesheet">
</head>

Why does the import fail in Safari?

I think a fix for this will ship in the next Safari release. As I understand it, the cause of it was that the Safari sources weren’t up to date with the latests requirements in the Fetch spec. But that has been fixed in Safari Technology Preview 105 https://webkit.org/blog/10428/release-notes-for-safari-technology-preview-105/. The fixes are https://trac.webkit.org/changeset/260003/webkit/ and https://trac.webkit.org/changeset/260038/webkit/. The original spec issue is https://github.com/whatwg/html/pull/3656 — sideshowbarker, May 06 '20 at 02:38

score 1 · Accepted Answer · answered Mar 01 '20 at 12:24

1

By adding crossorigin to my imports Safari accepted the same origin resource.

<script src="/js/i18next.js" type="module" crossorigin></script>

Unfortunately Safari does not provide a no-caching mode which made my testing a lot more cumber-stone.

answered Mar 01 '20 at 12:24

Kermit

2,865
3
30
53

score 1 · Answer 2 · answered Dec 14 '22 at 10:51

Please see Disabling same-origin policy in Safari, If you want to disable the same-origin policy on Safari (I have 9.1.1), then you only need to enable the developer menu, and select "Disable Cross-Origin Restrictions" from the develop menu. (In german"Ursprungsübergreifende Beschränkungen deaktivieren")

Safari cannot load local js file. Reports cross-origin error

2 Answers2

Linked