00:00
Hello,大家好,那么这一个小节我们来介绍一下跨域请求的另外一种解决方案,就是cos。那么course是什么呢?它呢,全称叫做crossor resource。跨域资源共享。那么这个跨域资源共享呢,是官方的跨域解决方案,注意啊,它可跟G3P不一样啊,G3G3P的话是这个。野鹿的是吧,这个呢,是正规军。然后它的特点是不需要在客户端做任何特殊操作,完全在服务器中进行处理啊,就可以呢来实现跨域支持get post,当然不光是get和post,还包括其他一些请求都可以。那么跨域资源共享这个标准呢?它新增了一组HTTP的首部字段,就是响应头啊,允许呢,服务器声明哪些原站可以通过浏览器啊,有权限去访问这些资源。
01:00
也就是说客户端呢,你要发请求,你就按照S的那个步骤去做就行了。至于跨域这个问题的话,你只要让服务端去设置这个响应头就可以实现跨域,非常非常的方便。其实我们从最开始的阿贾克斯基本操作到后来几queryce,然后废发那些请求,我们在服务端为什么能够啊实现跨域就是我们的请求为什么能跨域,就是因为我们设置了这些响应头。就是因为咱们设置的响音头,好了,我们接下来的话给大家演示一下,首先。啊,我们这儿写一个页面啊,很简单,跟咱们原来那个都差不多啊,点击这个按钮发一个请求,把结果在下边div里边做一个呈现。啊,这div没有加,咱们把D呢补上result,然后上面这个位置stay标签井号的result。宽度200。然后高度呢100,然后边框一个PX井号的90B。
02:05
OK,搞定。来看效果怎么样,刷新页面没有问题,好接下来的话呢,我们开始去做啊,然后。啊,然后BTN等于一个document.get query select。然后把八层的放进来。下一步呢,去绑定事件Btn.on click,然后等于。好,四步走啊,再次来过一下架的操作,第一步创建对象。X等于一个new的xmlhttp request,第二步呢,是做一个初始化。设置。好,然后x.open第一个参数是发送的一个请求类型,第二个呢是请求URL地址,咱们给谁发,咱们准备呢,给这个来发啊。二。然后里边写一个cos server server,然后request,然后response。
03:04
好,然后咱们在这块呢,直接做一个响应response.send。然后我们写一个hello。好保存我们就要给他发啊,给他发那们入金的话应该是127.0.0.1冒号8000斜杠cos杠三。好了,设置完毕啊,下面第三步的话是做一个发送X点三,然后第四步的话呢,是绑定事件处理响应结果啊。是剑。X点等于一个function。在里边咱们还要做判断,x.ready state等于一个四。后边的位置再做判断,X点的话大于等于200,然后并且。啊,小于一个300。在里边我们处理返回结果啊,我们直接使用console log的方式来打印一下响应体。
04:03
好在这输出响应题。搞定。好,我们来先看看效果怎么样啊,点开这个浏览器刷新页面。刷新,然后在这的话,咱们点击看一下。你会看到这么一个报错。啊,同学说,诶,好像感觉有有点眼熟,有同学说,哎,好像没有见过这错误,我们一起来看一看啊,Access to xmlhttp request at,这一个from orange now has been block,注意这个的话是告诉我们已经被阻挡了。被谁阻挡呢?被这个course跨域共享的这个。机制啊,给阻挡了,说了,哎,服务端你没有返回这样一个响应头。告诉我们啊,服务端没有返回这样一个响应头,那么所以说呢,我们在这儿呢,要想能够跨越请求,必须要在服务端返回结果的时候呢,设置一个响应头才可以。
05:02
那同学可能会说,诶,为什么我们原来没有报这个错误,没有见过这个错误呢?你看一下啊,这是咱们之前的那些。啊,那些呃,服务啊,你点开瞅一眼。他们都有这些响应头。看这个。都有这个小烟头,所以说我们是可以直接跨域的。你看好了啊,这可是一个话语请求file协议,我们想我们向谁发请求,我们向HTTP协议去发请求。他们的协议是不一样的,所以他们是跨域请求。而且还是按价格。所以说你要是想跨域直接发S是不行的,你必须要呢做一做出一些设置来怎么做,看好了,我们来加一下这个响应头。设置。响应头。来一个response点儿set header。里边写一个access control。然后呢?
06:00
Origin。注意,这是一个固定写法,后边的话填写允许的。啊,咱们这个允许的这个网页的URL。填上,不过咱们的话一般会写一个星号,星号的话表示通配所有的网页都好使,如果说你只是想让想让某一个网页好使,那你可以这样去写,比如。说127.0.0.1。然后呢,冒号写一个5500端口。那么这样的话,只有幺二七点零点零点一五千端口这样的网页才可以呢,向我们这个服务发送请求。好了,我把这个呢注掉。看看效果怎么样,刷新页面,然后点击,然后点开L,你看一下响应题就回来了。那么其实呢,除了这个响应头之外呢,还有一些。啊,这些响应头。你可以看一下,它是定义了一组HTTP的这个手工字段。我们可以来看一下文档,这个文档地址啊,这个这块已经列出来了啊,大家可以呢,有兴趣可以看一看。
07:02
显通道有好好几个。啊,好几个。走啊,刚才呢,咱们写的是第一个。Access control就设置了。哪些网页可以给我们发请求,这是一个下边的话,你看一下这有一个X pose headers来暴露这个头部信息的,你这是一个跨域请求返回,这个结果呢,哪些头信息可以暴露啊,你可以在这做一个设置。然后呢,这个呢是一个access control maxage是做一个预请求的结果缓存。你可以加一个时间,加这个时间之后呢,就每一次请求是直接去请求,而不会做一个预检查了,是这样的一个作用啊。然后下边这个呢,是跨域请求的时候呢,是不是可以呢,携带我们的验证信息啊,比如说cookie之类的。然后呢,这个呢,是设置我们请求允许的方法。
08:02
啊,设置请求允许的方法,默认呢是get和两个可以,如果说你以后呢,想发送post delete,还有呢,比如说方法,那么这个时候你需要呢,在这里边加一个设置,比如说你加一个星号。加一个星号就意味着任何的请求方法都可以允许请求他们的服务。啊,浏览器都会放行,然后呢,这里还有一个就是头信息,就是你呢,作为一个跨域请求。这个咱们报错,其实之前看过是吧,要加一个自定义头的话,是不让去请求的,那我们该怎么办呢?就应该在这个响应结果当中呢,加入允许的响应头的一个展信息,我们也是一样子写了一个星号。这样的意思就是说我允许客户端在发送请求时呢,给我去发送任意的请求头啊。可以是预定义的,也可以是自定义的,都可以。那平时的话,我们在啊,在写的时候呢,一般会这样去做啊,response.set header。
09:04
除了加上上面这个origin origin之外呢,咱们还会加一个control。Head把这个头信息咱们也给它加上。另外呢,还有就是那个请求方法。请求方法,Method。上把这个也加上,这样子的话呢,客户端在发送请求时,你跨越请求啊,你是哪个页面都行,你呢头信息可以自定义,然后呢,你的请求方法也可以呢,随意对吧,Get post put delete touch等等方法都可以使用。那么你可以发现呢,咱们使用course来设置。跨域呢是非常非常简单的,只需要加上响应头就可以了。好了,那么关于咱们这个cos的一个设置,就先说这么多。
我来说两句