如何处理不安全的 XMLHttpRequest 端点 [重复]

Posted 2023-02-24

【中文标题】如何处理不安全的 XMLHttpRequest 端点 [重复]

【英文标题】：How to deal with insecure XMLHttpRequest endpoint [duplicate]

【发布时间】：2020-04-15 08:39:17

【问题描述】：

我对编码非常陌生，但我的网站有问题。我收到一条错误消息：

混合内容：“ajax-utils.js:34”处的页面混合内容：“https://daringtrifles.github.io/courserahtmlcssjavascript/module5realsol/index.html”处的页面是通过 HTTPS 加载的，但请求了不安全的 XMLHttpRequest 端点“http://davids-restaurant.herokuapp.com/categories.json”。此请求已被阻止；内容必须通过 HTTPS 提供

这是我的 AJAX 代码。请大家告诉我我的错误在哪里以及如何解决它们？

(function(global) 

  // Set up a namespace for our utility
  var ajaxUtils = ;


  // Returns an HTTP request object
  function getRequestObject() 
    if (window.XMLHttpRequest) 
      return (new XMLHttpRequest());
     else if (window.ActiveXObject) 
      // For very old IE browsers (optional)
      return (new ActiveXObject("Microsoft.XMLHTTP"));
     else 
      global.alert("Ajax is not supported!");
      return (null);
    
  


  // Makes an Ajax GET request to 'requestUrl'
  ajaxUtils.sendGetRequest =
    function(requestUrl, responseHandler, isJsonResponse) 
      var request = getRequestObject();
      request.onreadystatechange =
        function() 
          handleResponse(request,
            responseHandler,
            isJsonResponse);
        ;
      request.open("GET", requestUrl, true);
      request.send(null); // for POST only
    ;


  // Only calls user provided 'responseHandler'
  // function if response is ready
  // and not an error
  function handleResponse(request,
    responseHandler,
    isJsonResponse) 
    if ((request.readyState == 4) &&
      (request.status == 200)) 

      // Default to isJsonResponse = true
      if (isJsonResponse == undefined) 
        isJsonResponse = true;
      

      if (isJsonResponse) 
        responseHandler(JSON.parse(request.responseText));
       else 
        responseHandler(request.responseText);
      
    
  


  // Expose utility to the global object
  global.$ajaxUtils = ajaxUtils;


)(window);

【问题讨论】：

这能回答你的问题吗？ "Mixed content blocked" when running an HTTP AJAX operation in an HTTPS page

【参考方案1】：

你的错误在这里：

request.open("GET", requestUrl, true);

requestUrl 是http://davids-restaurant.herokuapp.com/categories.json 我猜。您只需稍微更改该 URL。

更改您的请求网址

http://davids-restaurant.herokuapp.com/categories.json

到

https://davids-restaurant.herokuapp.com/categories.json.

只需在您的http 中添加一个“s” -> https 现在它应该可以工作了。

【讨论】：

谢谢！我现在出现另一条错误消息“ajax-utils.js:34 Access to XMLHttpRequest at 'file:///Library/WebServer/Documents/module-5-master/sn-ps/home-sn-p.html' CORS 策略已阻止来自原点'null'：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。同样，第 34 行有问题。请帮忙！谢谢！

好的，你现在有一个 cors 错误。您使用什么后端服务器语言？ php? javascript（node.js）？还是其他？

我建议使用axios。它简单且对 ajax 请求非常有用。

我现在正在使用 javascript

这不适用于 POST 请求。但适用于 GET AJAX 请求。