参加了阿里云天池的视觉 AI开发者创新应用赛，我学到了什么？_参加开发者大赛的感受和收获

预选赛

非常幸运，我参加了这个比赛，为什么说幸运呢？ 因为是小破站关注的一个up主推荐的，幸运的是我知道了这个比赛，更幸运的是我参加了这个比赛，虽然没有什么大牛队友，我们也磕磕碰碰走到了现在，顺利的通过了预选赛。

为什么说磕磕碰碰呢？是因为找不到队友，准确的说是找不到靠谱的队友，我们都抱着队友可以帮我们承担大部分的任务的心态去的，谁都不想找一个大家都是新手，一切从头开始，因为那样项目进展推动太艰难了。
这里，我不得不吐槽一下这个比赛的缺陷，人员方面可以说事没有什么要求，但是人数其实并不多，而且里面有企业，有组织，他们的比赛经验肯定是比我们这些新手强太多了，他们通过不断地创建队伍来扩充，因为一个队伍的人数是有限的，既然是不公平竞争，所以我们的队伍也没抱着能得奖的想法去，就是为了去学习，去了解，去丰富自己。
我所在的队伍里大家都没有接触过真正的人工智能，停留在用这些人工智能的功能，而不了解它到底是怎么来的，怎样通过数据训练、怎样通过算法构建、如何优化。
不过有一点好处是大家都学过一种或者多种编程语言而且学习的热情还蛮高的，并不会被从头开始而打倒。在前期磕磕碰碰的讨论和交流下，确定了方向和对未来的展望，其实我并不是很满意，因为时间很短，我关注的更多的是实用性，对日常生活有什么积极作用，而不考虑商业价值，但是阿里云毕竟是企业，都是从你的作品的商业价值入手，所以没有办法。

半决赛

到了半决赛才是考验一个队伍的开始，真正从口头说到了实地干，没有分工，人员不齐，是时常发生的事，而且还有上班党，白天工作一天实在提不起精神去考虑和做这些，但是没关系，毕竟我们初赛也是这样过来的。
方向在初赛决定了，那就剩下怎样实现，讨论了一下，感觉网站对于我们来说，难度较低，执行效率较高，时间成本较低，于是我们就开始了网站的搭建，队长对python比较熟悉，于是他开始了后端对阿里云api的调用测试，蛮顺利的，但是我担心的是前后端的跨域问题，也就是CORS。
CORS的介绍：

跨域资源共享（CORS）是一种机制，它使用附加的HTTP标头来告诉浏览器以使Web应用程序在一个来源运行，并从另一个来源访问选定的资源。Web应用程序请求其来源（域，协议或端口）不同的资源时，将执行跨域HTTP请求。

为什么呢？因为我之前在看到api接口后，尝试直接在vue种通过promise 的request 来调用，但是我发现不可以，最开始我用的是简单的request ，包括url、header、method、data，其他的我就没定义，显示不通过，然后看文档发现，阿里云的api为了安全性，需要验证key，accessKeyId 和 accessKeySecret 是通过主账号创建的子账号来生成的，为什么要用子账号呢？当然是为了保护主账号不被直接访问。

但是这样的加密，对于想我这样的菜鸟真的是太难了，拒绝获取数据并没有直接给你返回一个 0 （request 中 0表示请求失败，1表示请求成功并返回数据），而我获取到的数据是

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<RequestId>6B5DCD4B-F499-4DDD-94FC-6AC09FF5E808</RequestId>
<HostId>facebody.cn-shanghai.aliyuncs.com</HostId>
<Code>InvalidVersion</Code>
<Message>Specified parameter Version is not valid.</Message>
<Recommend>
<![CDATA[ https://error-center.aliyun.com/status/search?Keyword=InvalidVersion&source=PopGw ]]>
</Recommend>
</Error>
#yddContainer{display:block;font-family:Microsoft YaHei;position:relative;width:100%;height:100%;top:-4px;left:-4px;font-size:12px;border:1px solid}#yddTop{display:block;height:22px}#yddTopBorderlr{display:block;position:static;height:17px;padding:2px 28px;line-height:17px;font-size:12px;color:#5079bb;font-weight:bold;border-style:none solid;border-width:1px}#yddTopBorderlr .ydd-sp{position:absolute;top:2px;height:0;overflow:hidden}.ydd-icon{left:5px;width:17px;padding:0px 0px 0px 0px;padding-top:17px;background-position:-16px -44px}.ydd-close{right:5px;width:16px;padding-top:16px;background-position:left -44px}#yddKeyTitle{float:left;text-decoration:none}#yddMiddle{display:block;margin-bottom:10px}.ydd-tabs{display:block;margin:5px 0;padding:0 5px;height:18px;border-bottom:1px solid}.ydd-tab{display:block;float:left;height:18px;margin:0 5px -1px 0;padding:0 4px;line-height:18px;border:1px solid;border-bottom:none}.ydd-trans-container{display:block;line-height:160%}.ydd-trans-container a{text-decoration:none;}#yddBottom{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;overflow:hidden;background-position:left -22px}.ydd-padding010{padding:0 10px}#yddWrapper{color:#252525;z-index:10001;background:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png);}#yddContainer{background:#fff;border-color:#4b7598}#yddTopBorderlr{border-color:#f0f8fc}#yddWrapper .ydd-sp{background-image:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png)}#yddWrapper a,#yddWrapper a:hover,#yddWrapper a:visited{color:#50799b}#yddWrapper .ydd-tabs{color:#959595}.ydd-tabs,.ydd-tab{background:#fff;border-color:#d5e7f3}#yddBottom{color:#363636}#yddWrapper{min-width:250px;max-width:400px;}
1
2
3
4
5
6
7
8
9
10
11

这显然是不行的，我修改了request，然后出现了错误提示，不断修改不断报错，说实话我现在也没解决，不过已经差不多猜出错误的原因与后端接口有关，但是我没法改，因为接口是阿里云定的。
报错1：

Cannot read property 'getHeaders' of undefined
1

报错原因：请求头中包含接口不允许的参数
解决办法：删除headers中不必要的参数，或者把这些参数放在data中

报错2：

has been blocked by CORS policy: Request header field apiversion is not allowed by Access-Control-Allow-Headers in preflight response.
1

报错原因：我设置的method为post，没有通过响应预检。
解决方法：

1. 了解什么是响应预检
   在CORS中，使用OPTIONS方法发送一个预检请求，这样服务器就可以用这些参数来响应是否可以接受发送请求。Access-Control-Request-Method报头作为预检请求的一部分通知服务器，当实际请求被发送时，它将用POST请求方法发送。该Access-Control-Request-Headers报头通知服务器，当实际请求被发送时，它将与一个 X-PINGOTHER 和Content-Type的自定义头一起发送。服务器现在有机会确定它是否希望在这些情况下接受请求。
2. 去查看后端接口的Content-Type允许设置的参数，因为可能是Content-Type的参数不被允许返回。
3. Content-Type允许的值为：application/x-www-form-urlencoded、multipart/form-data、text/plain

报错3：

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
1

报错原因：请求源不被允许，我的访问地址被拒绝。
解决办法：
了解Access-Control-Allow-Origin参数

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Origin: null
1
2
3

修改服务器的api允许地址，
4. 允许全部地址
Access-Control-Allow-Origin: *
5. 只允许指定地址
修改为Access-Control-Allow-Origin: 192.168.0.52
（192.168.0.52假设为我的访问地址）
6. 不允许所有地址访问Access-Control-Allow-Origin: null

初次接触Php的我，遇到了哪些问题？

后端服务是Php写的，但是我从来没有接触过Php ，这无疑是给我添加一个很大的难题啊，在服务器上查看项目结构发现，有一堆零散的php文件，而文件中大多数都是对模块的引用，看的我是头昏脑涨，在我写的常规的前端页面（html）怎么导入就成了问题，特别的是我还用到了javascript去动态加载页面，于是我就开始了手撕源码之路，在看了无数遍项目结构后，大概画出了项目的组成和逻辑关系，然后我发现了关键问题，也就是autoload.php，从字面意思上我们也能知道，这是网页启动时自动载入的内容，嗯。。。又是一堆模块，但是我又发现了一个关键点basic.blade.php，这是个什么文件呢，打开一看，文件的结构和普通的html文档差不多，多出了的是专属于php语法的部分，大致如下：

<?php
  $Color = $settings->get('theme_color', '#000');
?>
1
2
3

然后我就去查了一下这个文件名，于是有了重大性突破。这个文件原来是Laravel 框架的一个模板文件，什么是Laravel框架呢？

Laravel是一个简洁、优雅的PHP Web开发框架(PHP Web Framework)，拥有庞大的社区，而且Laravel Vapor 支持无服务部署，想了解的可以点击进入Laravel的官网。

既然找到了这个文件，那么我就可以让他在服务启动的时候加载jquery-min.js文件，还可以加载网页内容，可能会有人会问啦：啊！你为什么不直接用在线的jquery的库文件，我试了啊，但是加载实在是太慢了，个人感觉很影响体验，当你访问一个页面的时候它不是直接加载还让你等待，在这个5G都出现的社会，你能接收吗？反正我不能，不过在线加载jquery.js文件的方式我写在下面：
完整版本jquery 库文件：

<!-- 在html的 head 标签内加入如下代码 -->
<!-- 官方引入 这里我用的3.4.1版本的大家可以改为自己想要引入的版本 -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

1
2
3
4

非官方引入

<!-- 在html的 head 标签内加入如下代码 -->
<!-- 百度 -->
<script src="https://libs.baidu.com/jquery/3.4.1/jquery.js"></script>

1
2
3
4

<!-- 谷歌 ，通过谷歌引入是比较麻烦的  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

1
2
3
4

<!-- 微软 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.js"></script>

1
2
3
4

<!-- 一个公共cdn -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

1
2
3
4

压缩版本jquery 库文件

<!-- 在html的 head 标签内加入如下代码 -->
<!-- 官方引入 这里我用的3.4.1版本的大家可以改为自己想要引入的版本 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

1
2
3
4

非官方引入

<!-- 谷歌  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

1
2
3
4

<!-- 微软 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>

1
2
3
4

<!-- 一个公共cdn -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

1
2
3
4

我们不难看出通过百度引入是比较简单的，通过谷歌、微软会比较复杂，而且国内访问有时会出现问题（你懂的）。
其实这些jquery.js文件我们可以通过快捷的方式查看到地址，比如 百度，打开百度，F12进入开发者工具调试界面，选择Elements菜单，（默认就是Elements） ，随便点一下左面的部分ctrl + f 搜索关键字 jquery ，就会发现一个juqery的js文件
，我们可以拿过来用一下试试，有时他们也是使用的本地的jquery.js，而且没有给你访问权限， 那么你就不能直接用下面得到的地址来引用；还可以选中 Network菜单，刷新页面，重新加载，ctrl + f 搜索关键字jquery ，也能得到该地址。