跨域異常之----Cross origin requests are only supported for protocol schemes: http, data, chrome,...

一、背景描述

下面是我用ajax異步請求時的寫法，請注意url是怎麼寫的，下面的錯誤就是由於這個url的寫法導致的。

// 獲取省份列表
$(document).ready(function () {
     $.ajax({
          url: "devlsub.iot.com:53310/city/getProviceList",    //請求的url地址
          dataType: "json",   //返回格式爲json
          async: true,//請求是否異步，默認爲異步，這也是ajax重要特性
          data: "",    //參數值
          type: "GET",   //請求方式
          success:function(req){
              console.info(req);
          },
          error:function(){
              //請求出錯處理
              alert("出錯啦")
          }
     });
});

二、問題描述

今天在本地調用服務器上的一個獲取省份的列表時，報瞭如下錯誤信息：

Access to XMLHttpRequest at 'devlsub.unisiot.com:53310/city/getProviceList' from origin 'http://localhost:63333' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

大概意思是從本地的一個域名訪問另外一個域名被CORS政策阻止了，跨域請求僅被支持的協議類型爲：http, data, chrome, chrome-extension, https 協議。

三、錯誤原因

Javascript出於對安全性的考慮，而禁止兩個或者多個不同域的頁面進行互相操作。相同域的頁面在相互操作的時候不會有任何問題。我們在用跨域的時候，大部分都在知道哪些問題是跨域問題，也知道怎麼解決。但是就是具體解決，或者說最終解決，都不理想，或者最終解決不了。

這個報錯問題是因爲請求的url沒有寫明是什麼協議，如我只寫了url: "devlsub.iot.com:53310/city/getProviceList"。

四、解決方案

4.1 方案1

根據錯誤提示信息，我修改了url 的寫法：url: "http://devlsub.iot.com:53310/city/getProviceList"。然後再去請求這個地址，問題得到完美解決。

4.2 方案2

在另一篇博客裏記錄着，請移步至此：https://blog.csdn.net/weixin_44299027/article/details/94836940