对于跨域的 ajax 请求流程:
从浏览器发送请求,请求确实送到了服务器,服务器也收到了本次请求并且服务器也把数据交给了浏览器,但浏览器没有进一步给我们,因为浏览器发现跨域了,浏览器拿着数据不给我们,这才是跨域(千万不要认为跨域是请求连发送都没发送出去)
如何解决跨域
1、cors 解决跨域
不需要前端做任何操作,cors 解决跨域其实就是写服务器的人在服务器里面返回响应的时候加特殊的响应头。但真正开发中响应头并不是随便配置的,如果配置之后会造成任何人都可以找这台服务器要数据。
2、JSONP
原理:借助 script 标签的 src 来帮助我们请求数据。将数据当作一个 javascript 的函数来执行,并且执行的过程中,传入我们需要的json,但用的少,因为这种方式前端人员需要用些特殊的方式,后端人员也需要配合,而且只能解决get 请求的跨域问题,post 请求解决不了。
3、配置代理服务器
代理服务器和浏览器的所处的端口号一致,代理服务器有点像房屋中介,左侧是租房子的人,右侧是房东。代理服务器和服务器之间打交道不用 ajax(ajax 是前端技术),两台服务器之间打交道使用的是最传统的 http 请求,同源策略根本管不到代理服务器和服务器之间,虽然端口不一样,但不存在跨域,那我们如何开代理服务器呢?
二、开启代理服务器:
nginx
:可以开启代理服务器,学习成本相对高一些,需要对后端技术有一些了解,本次不讲这个。借助 vue 脚手架 vue-cli 开启代
理服务器,只需要四行代码。
devServer.proxy
devServer:开发服务器
proxy:代理
方式一:在 vue.config.js 添加如下配置:
说明:
优点:配置简单,请求资源时直接发给前端 8080 即可缺点:不能配置多个代理,不能灵活控制请求是否走代理
工作方式:如果按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)
方式二:编写 vue.config.js 配置具体代理规则:
说明:
优点:可以配置多个代理,且可以灵活地控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。