实现跨域ajax请求的方式有很多,其中一个是利用歌珥,而这个方法关键是在服务器端进行配置。
本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明(深层次的配置我也不会)。
歌珥将请求分为简单请求和非简单请求,可以简单的认为,简单请求就是没有加上额外请求头部的get和post请求,并且如果是帖子请求,请求格式不能是application/json(因为我对这一块理解不深如果错误希望能有人指出错误并提出修改意见)。而其余的,说,帖子请求,内容类型为application/json的请求,以及带有自定义的请求头部的请求,就为非简单请求。
简单请求的配置十分简单,如果只是完成响应就达到目的的话,仅需配置响应头部的Access-Control-Allow-Origin即可。
如果我们在http://localhost: 3000域名下想要访问http://127.0.0.1:3001域名。可以做如下配置:
然后用ajax发起一个简单请求,例如帖子请求,就可以轻松的得到服务器正确响应了。
实验代码如下:
服务器端代码:
然后就能得到正确的响应信息了。
这时候如果看一下请求和响应的头部信息,会发现请求头部多了个起源(还有一个推荐人为发出请求的url地址),而响应头部多了个Access-Control-Allow-Origin。
现在可以发送简单请求了,但是要想发送非简单请求还是需要其他的配置。
当第一次发出非简单请求的时候,实际上会发出两个请求,第一次发出的是起飞前的请求,这个请求的请求方法是选择,这个请求是否通过决定了这一个种类的非简单请求是否能成功得到响应。
为了能在服务器匹配到这个选项类型的请求,因此需要自己做一个中间件来进行匹配,并给出响应使得这个预检能够通过。
这样的选择请求就能够通过了。
如果检查一下起飞前的请求的请求头部,会发现多了两个请求头。
要通过这两个头部信息与服务器进行协商,看是否符合服务器应答条件。
很容易理解,既然请求头多了两个信息,响应头自然也应该有两个信息相对应的,这两个信息如下:
第一条信息和起源相同因此通过第。二条信息对应Access-Controll-Request-Method,如果在请求的方式包含在服务器允许的响应方式之中,因此这条也通过。两个约束条件都满足了,所以可以成功的发起请求。
至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。
真正的请求当然也成功获得了响应,并且响应头如下(省略不重要部分)
请求头如下:
这就很显而易见了,响应头部信息是我们在服务器设定的,因此是这样。
而客户端因为刚才已经预检过了,所以不需要再发Access-Control-Request-Method这个请求头了。
这个例子的代码如下:
