谷歌翻译破坏了我的 AJAX 加载（相对 URL）内容答案

【问题标题】：Google translate breaks my AJAX loaded (relative URL) content谷歌翻译破坏了我的 AJAX 加载（相对 URL）内容
【发布时间】：2018-12-11 16:33:32
【问题描述】：

似乎这一定是一个常见问题，但我无法在此处或在更广泛的网络上找到解决方案。我们的网站通过 AJAX 调用将内容加载到具有相对 URL 的服务器（例如使用 jQuery）：

$("#mydiv").load("sku123.html", 
  function(response, status, jqXHR) {
    if (status=="error") {
      // Failed
    }
  }
);

工作正常，直到用户请求我们页面的谷歌翻译，然后 AJAX 调用返回

Failed to contact server, connection failed.

我注意到window.location.href 显示的是谷歌翻译服务器，而不是我们自己的。所以我猜这个 AJAX 调用将发送给谷歌，它当然对我们试图获取的 HTML 一无所知（尽管我希望是 404，而不是“连接失败”）。

这一定是一个常见问题，但什么是好的解决方案？我不想将我们的服务器硬编码到这些 URL 中（然后它会在我们的开发/测试系统上中断）。

【问题讨论】：

标签： ajax relative-path google-translate

【解决方案1】：

浏览器控制台显示问题 - 跨域请求失败。重新配置服务器以允许来自https://translate.googleusercontent.com 的 CORS，并且一切都按预期工作（使用相对 URL）。用于 tomcat 的 Web.xml：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>https://translate.googleusercontent.com</param-value>
  </init-param>  
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

【讨论】：

嗯...但是 AJAX 内容没有翻译。呃。