跨域异常之----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