Vaadin 14生产模式和Safari问题

问题描述

我最近将我的应用程序切换为Vaadin 14本机NPM（非兼容模式）和生产模式。 Vaadin版本是14.3.7。这是一个Spring Boot应用程序，使用Gradle打包为可执行的.war文件。我正在使用Vaadin Gradle插件。

一切正常，但在Safari（iOS + Mac）中无法使用该应用程序的情况除外。在Mac上可以看到以下错误：

TypeError: 'text/html' is not a valid JavaScript MIME type.

我发现有消息说ES6模块会在Safari上导致此错误，但我认为Vaadin默认在生产模式下转换为ES5。

我怎样做才能使它们在Safari上也能正常工作？

更新 build.gradle文件中的一些相关内容：

plugins {
    ...
    id 'com.vaadin' version '0.8.0'
}

ext{
    ...
    set('vaadinVersion',"14.3.7")
}

dependencies {
    ...
    implementation('com.vaadin:vaadin-spring-boot-starter') {
        ["com.vaadin.webjar","org.webjars.bowergithub.insites","org.webjars.bowergithub.polymer","org.webjars.bowergithub.polymerelements","org.webjars.bowergithub.vaadin","org.webjars.bowergithub.webcomponents"]
                .forEach { group -> exclude(group: group) }
    }
    ...
}

vaadin {
    optimizeBundle = true
    pnpmEnable = true
    productionMode = true
}

解决方法

原来是由以下因素引起的：

• 该应用程序的前面是一个Apache服务器，该服务器在未登录时会重定向到SSO。
• Vaadin将捆绑软件作为ES6模块加载。
• 加载ES6模块时，Safari不会发送cookie，除非添加了crossorigin="use-credentials"。
• Vaadin仅添加crossorigin，不添加crossorigin="use-credentials"（由于它们正式支持Safari，因此可以认为是错误）。

有关更多信息，请参见https://jakearchibald.com/2017/es-modules-in-browsers/，https://stackoverflow.com/a/52559612/775138以及John Meinken的评论。

我们通过配置Apache不保护捆绑包路径来解决此问题。