javascript - 通过客户端站点上的 api 获取 https 内容，但浏览器引发混合内容 http 错误

Question

我正在尝试在 Django 应用程序中构建一个外部 API，以将一些内容提供给生产客户端 Wordpress 站点。客户端在 https 上，javascript 使用 fetch 获取 https api url，但浏览器声称 http 混合内容。是什么赋予了？

我已经尝试过 Chrome 和 Firefox，并且都返回了类似的错误

fetch('https://mysite.pythonanywhere.com/apit?param1=100000&param2=1000', {
    method: 'GET',
  })
  .then(function(response) {
    if (response.status !== 200) {
      console.log(response);
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }
  });

我在 Django 中对此的看法是：

response = JsonResponse(the_content_dict,safe=False)
return response

我可以直接在浏览器中访问 URL 并按预期查看 json 响应，但是当我将上面的代码放在客户端 WP 站点上时，我在 Firefox 控制台中看到：

Blocked loading mixed active content “http://mysite.pythonanywhere.com/apit?param1=100000&param2=1000”

TypeError: NetworkError when attempting to fetch resource. rank:154:3
Response { type: "cors", url: "https://mysite.pythonanywhere.com/apit?param1=100000&param2=1000", redirected: false, status: 500, ok: false, statusText: "Internal Server Error", headers: Headers, body: ReadableStream, bodyUsed: false }
Looks like there was a problem. Status Code: 500

同样，在 Chrome 中：

(index):154 Mixed Content: The page at 'https://clientsite.com' was loaded over HTTPS, but requested an insecure resource 'http://mysite.pythonanywhere.com/apit?param1=100000&param2=1000'. This request has been blocked; the content must be served over HTTPS.
(anonymous) @ (index):154
(index):1 Uncaught (in promise) TypeError: Failed to fetch

为什么浏览器试图加载非 https 版本而不是 fetch 中的 https？我正在使用 django-cors-headers 将似乎正在运行的客户端域列入白名单。

标签： javascriptdjangofetch-apimixed-content