https 关联到不安全的 XMLHttpRequest 端点答案

【问题标题】：https associated to an insecure XMLHttpRequest endpointhttps 关联到不安全的 XMLHttpRequest 端点
【发布时间】：2020-12-01 06:32:05
【问题描述】：

我的网站托管在云运行应用程序上：https://ap4-xxxxxxxx.a.run.app/。该网站正在调用此处托管的 API https://ap4-xxxxxxxx.a.run.app/api/undefined。 但是这个请求在我的浏览器中被阻止了。

错误信息：

混合内容：“https://ap4-xxxxxxxx.a.run.app/”处的页面是通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点 'http://ap4-xxxxxxxx.a.run.app/api/undefined/'。该请求已受阻；内容必须通过 HTTPS 提供。

API https://ap4-xxxxxxxx.a.run.app/api/undefined 在我的浏览器或邮递员上运行良好。并且请求它的代码明确提到了 https ：

const request = https://ap4-xxxxxxxx.a.run.app/api/${variable};
axios.get(request)
      .then(result => {
        const PlaceList = result.data.map(
          station => {
            const isFavorite = PlaceId.includes(Place.number);
            return { ...Place, isFavorite: isFavorite }
          }
        );
        this.setState({
          PlaceList: PlaceList,
          isLoading: false
        })
        updateFavPlaceList(PlaceList);
      })

我不明白这里有什么问题。我的应用程序是在进行 http 调用而不是 https 吗？我在这里 (Page loaded over HTTPS but requested an insecure XMLHttpRequest endpoint) 读到，一些 https 是自签名的。是云跑的情况吗？

我尝试过 Cors，但没有帮助。

非常感谢任何意见或建议。

【问题讨论】：

标签： reactjs web axios google-cloud-run mixed-content

【解决方案1】：

您似乎确实在某个地方在前端发出 HTTP:// 请求，或者确保您的应用不会重定向到 http://。

.app 域位于浏览器的硬编码 HSTS 列表中。如果您键入任何 .app 域，它将被请求为 https:// 。在现代浏览器中，即使使用 XHR，也无法通过 http:// 访问 .app 域。

【讨论】：

【解决方案2】：

所以这是一个快速修复。我强迫我的后端（烧瓶）生成 https url。使用这里的答案：Flask url_for generating http URL instead of https

class ReverseProxied(object):
    def __init__(self, app):
        self.app = app

    def __call__(self, environ, start_response):
        scheme = environ.get('HTTP_X_FORWARDED_PROTO')
        environ['wsgi.url_scheme'] = 'https'

app = Flask(__name__)
app.wsgi_app = ReverseProxied(app.wsgi_app)

可能有更好的方法（可能是强制前端请求 https），所以请随时对此发表评论。

【讨论】：