day04/下午/073-尚硅谷-尚融宝-创建后台接口并解决跨域问题

好，那刚才我们说到了，我们必须呢，要写这样的一个后端接口才行，所以接下来呢，我们就打开我们的后端的idea。好，我们呢，把之前咱们写的这个项目给他打开啊。我。Open。然后呢，打开谁呢，打开我们之前写的这个0921，然后Java买class把它打开就行了。好啊，这个项目呢，我看一下他这个。这个这个东西如果他嗯弹出来的话，你一般就引那就可以了，那我们看这面吧，这个项目是年前的时候我们写的一个买be plus的一个测试项目，当时我们创建这个项目的时候呢，我们看一下to XL正好呢用的是一个spring对吧啊的形式创建的，创建完了之后呢，这面正好有个application叫properties啊，所以说呢，就万事俱备，就差启动一下了，所以在这个地方启动呢，实际上它是可以以这个HTTP的形式存在的，那如何与一个以一个web项目的形式存在并启动呢？我们必须得在嗯，POM里面先把这个spring BOO starter给它改成spring BOO starter web，这样的话呢，它就会引入一些web相关的一些依赖，然后呢，能够让我们这个项目呢以web的形式启动啊，所以呢，我们先把它，嗯，加一个外部后缀，然后刷新一下，看看相关的依赖有没有听进来。

Start是吧，添加进来了，好，那这个时候呢，我们就可以写controller了，那这样的话呢，我们在这个my business class这个里面呢，我们再加一个包叫controller。好，然后接下来呢，在这个controller里面呢，我们去创建一个具体的。

Web层的一个类，那我就管它叫user controller好，那这controller呢，它既然是一个controller是吧，那我们就得写controller rest，我们说呢，我要让它返回Jason数据，所以rest controller好，接下来呢，我给他一个地址叫蕊。Quest na，对不对？好，然后接下来呢，在这个地方呢，我们给他一个路径啊，叫杠user是吧？好接下来呢，在后面这个里面，我们呢，就想获取一个用户列表了，所以呢，我们引入一个叫resource啊，然后user service user service，好那么引入的呢，就是这个user service了，好然后接下来呢，我们写一个接口方法，比如说呢，我们写get map，因为刚才我们前端呢，调用的是这边是前端啊，这边调用的是user list对吧？好，那我这面呢就user，然后list。

List，然后接下来呢，在这面呢，我们写方法布，我们先返回一个列表，返回什么列表呢？User列表啊，然后接下来呢，List是吧？好，我把这个user包给它引进来，Out加answer啊看别引错了，我们里面自己写的这个user上面，这个anity包下面。好，然后接下来呢，在这块我们就直接return user service，点这里面正好有个类似方法，我们就把数据库当中的用户列表呢，就可以通过这种形式呢返回回来了，好，那这样的话呢，我们来启动我们的应用程序，因为我们application properties里面并没有去配置端口，所以它默认端口就是8080。

啊，然后我们在这边呢，去启动我的应用程序。软啊。诶，好像已经启动起来了哈，Started，然后呢，在这个秒述内，然后呢，我们整个应用程序呢，已经启动了，修了之后呢，我们来，嗯，在我们的这个地方呢，去访问一下local host，这正好有个8080USER list，然后大家看是不是整个的这个数据库当中的这个数据作为Jason的形式就展示出来了，我们可以F12啊，看一下啊。我看一下啊。行就在先暂时在这看吧，在这个地方就展示出来，展示出来之后，也就是说明这个地址是不是就接口就通了就可用了啊，那既然这个接口通了的话呢，那我们在这个位置。

前端这个位置调用，他也应该按理说它应该是成立的，对不对，那我们先来看一下成不成立啊。看一下刚才我们前端这个页面，我们刷新一下，你没发现好像不太行，嗯，但是他的错误却犯了，这个错误叫什么呢？就是前面加了一个加了一行，跟之前相比较的话，那么加的这行呢，叫做access to，也就是说访问通过什么访问呢？通过这个xmlhtp request啊，这个其实就是贾克斯的简称了啊，那个阿贾克斯的全称了，对不对？好，通过xmlhtp request对象呢，去访问这个8080端口的user list，这个接口从哪访问呢？从我们当前的这个5500 5500是什么呢？5500就是当前我的Vs code，好，我们刚才不是用了一个open with life server嘛，是这个内置的服务器的默认端口，好，那么通过我们的内置的服务器的5500端口呢？去访问8080端口呢？它被限制了，被什么限制了呢？被跨域策略限制了啊，所以说呢，这个地方我们会。

看到一个错误的具体的原因叫没有access control low header is present on the request request resource是吧，也就是说在这个network这个地方啊，我们找到刚才我们发的这个请求，有这个请求，这个请求呢，它它的这个request headers呀，就没有这个就是允许跨域。没有这个允许宽域啊，就是这样的一个啊配置头存在，所以呢是不能宽域的，那什么叫做宽域呢？我们来看这个笔记。这款啊，啊，两个域名，比如说这两个域名它不相同，那么你从京东上你就不能往淘宝上发两克楚发不了啊，他在直接在这个安全策略上就限制你了，比如说我淘宝后端有数据，然后我从京东里随便做个页面，我就能把淘宝的后端数据调出来，那你这个就太不安全了，对不对，所以从安全策略层面呢，是不允许的啊，那技术层面能不能实现呢？能实现我们需要呢，做一系列的配置啊，那同样如果这个8080和八零八一两个不同的端口，它属不属于跨域呢？也属于，比如说都是京东的这个域名，但是呢，端口不一样啊，那也宽裕，就像刚才我们这个似的，你看我这个都是buy a local host对吧。

啊呃，当然127的0.0.1和looks是同义词啊好，都是这个本地路径啊，那呢它的端口不一样，一个是8080，一个是5500，那么它俩呢也跨域啊好然后接下来呢，二级域名不同，比如说I这点京东点com以秒杀点京东点com，那这两个呃也跨语啊，也是不能够互相直接访问的好，默认情况下啊，默认情况下好然后接下来呢，如果只有协议不同，比如说都叫3W点京东点com，但是一个呢是在HTTP。

这个协议下的一个呢，是HTPS协议下的，那么这两个地址呢，也不能互相去发送阿贾克斯请求，也属于跨域啊，然后所以呢，这样的话呢，我们要能够解决这个跨域问题的话呢，我们呢就就需要找一些方法，那刚才我们这两个地址跨域主要的原因就是端口不同了啊，所以说我们要呃这个目前为止能够有的解决跨域方案的方法特别多啊，不下十种啊，那但是呢，在spring当中，它给我们提供了一个非常方便的一个接口，这个接口呃这个注解，这个注解呢就叫cross orange，我们只要把它放在相应的controller的定义上就可以了，那整个的controller呢，就可以被跨语了，所以呢，接下来呢，我们在这个地方啊，写一个cross orange。

好，然后接下来呢，我们，嗯，重新的去启动一下这个服务器。好，那这个服务器已经启动成功了，启动成功了之后呢，我们来看这边。好，大家看这个错误是不是没有了，错误没有了，与此同时我们来看network这面啊，你看前面就是我们之前调用的发生错误的情况，最后一个是我们最后一次调用的没有错误的情况啊，它的status是200，返回值是200，也就意味着我们这次的调用是成功的，我们点进去看一看，你会发现呢，它的这个。啊，这个hier里面啊，Header里面就是被请求的那个，呃，那那个那个response header里面，它有一个叫什么呢？Access control allow，就我允许任何一个前端的地址啊，向我发起一个跨域的请求，对吧，这个是原来没有的，好，也就是说目标地址8080啊给这个5500的反馈的这个啊response head里面有了这样的一个啊响应头的话，那么我们就可以针对目标地址发送跨域请求了，好，那这块是我们跨域就解决了，解决了之后呢，我们来看一下它的这个response，很显然这里面已经有这份数据了，那如果你想格式化查看的话呢，直接看previe就行了，这个里面呢，是格式化之后的这数据，我们可以看到所有的用户信息呢，都在这个响应的啊，这个内容当中呢，啊被我们获取到了，所以呢，这就是一个阿贾克斯的一个跨域请求，以及使用X怎么样去啊调用后台的。

啊，这样的一个接口的一个具体的方式。