Vue - 拉取服务器数据时涉及的复杂跨域问题

540 阅读4分钟

  此篇涉及cors跨域和proxy跨域。

  上一篇记录iView UI说到它的Table组件十分常用,练手时模拟了一下将服务器数据渲染上Table,由此遇到了jsonp无法解决的复杂跨域问题,此篇为解决问题的笔记整理。

  由于要模拟从服务器请求数据,所以首先你得有个服务器,这里用node-express搭建了一个:

  这里注意一下设置跨域需要的响应头时我图方便就直接用* 了,至于为什么实际情况中不要用谢谢下图评论区的这位大神作出的解答:

  看很多人练手时搭建服务器都是指定返回某个具体的文件,而这里只指定了路径,具体要请求哪个文件的工作则交给AJAX,个人觉得这样更符合实际情况吧。

  唠叨一下一些基础,这个服务器搭好之后域名就是http://本机的IP地址,端口就是server.listen里设置的端口,比如这里的本机IP为192.168.3.3,设置的端口号为3000,那在浏览器输入http://192.168.3.3:3000就能访问。

  服务器搭建好之后就可以启动服务器了,直接在命令窗口服务器文件所在目录下node server.js启动,也可以修改一下package使得可以用npm start或者用npm run dev这两个命令启动,因为我的项目是用了webpack打包的,启动时用的是npm run dev,个人觉得这样统一一下比较好。

  这里先附上我项目package.json的代码作为参考:

  下面是模拟服务器的package.json:

  npm start

  npm run dev

  服务器搭好之后项目那边可以先试一下AJAX请数据,虽然这个时候什么也请不到,但这里还是先写这一步。由于用JQuery写比较方便,这里就在index.html里引一下JQ然后用JQ写,网络OK的直接引cdn,网络不OK的下载下来再引。

  然后就可以在需要请数据的组件里写AJAX,写的时候注意这里一定要用created()生命周期来触发AJAX,因为created()是第一个能用this的生命周期,这样AJAX就能伴随着这个组件的创建而被触发。

  这里还要承着前面server的代码说明一下为什么这里请求的地址是 "http://192.168.3.3:3000/file?name=AJAXTableData.json",首先这里的/file是server创建中间件时定义的接口,对应的是创建中间件时指定的路径,如果路径指定的是一个具体的文件那就没后面什么事了,但这里的路径指定的是一个文件夹Data,所以就有了后面的一串querystring,name也是server在创建中间件时定义的key,对应的是所要请求的文件的文件名,这里稍微要对照一下上面server的代码理清一下思路。

跨域问题

  下面进入本篇的正题,jsonp无法解决的复杂跨域问题。

  写完上面最后一步后运行项目你会发现你根本没请到数据,打开后台会给你报一个cors policy相关的错,这是因为浏览器在跨域向服务器请求数据时浏览器会有一个询问服务器是否允许请求的这样一个动作,然而此时由于服务器端没有设置对这一询问的应答,那浏览器得不到应答就会默认为服务器不允许它将资源请走,这是目前请求资源失败的原因。解决这个问题有两种方法,一个是cors跨域,一个是proxy代理跨域:

  cors跨域

  原先跨域请求数据失败是因为浏览器在向服务器请求数据时的询问动作没有得到服务器的回应,那么我们就在服务器写一个允许浏览器请求数据的回应。

  然后需要请求数据的组件这边正常发AJAX请求即可:

  proxy代理跨域