在vue中,跨域是指浏览器不能执行其他网站的脚本;它是浏览器同源策略造成的,是浏览器对JS实施的安全限制。跨域本质是浏览器基于同源策略的一种安全手段;而同源策略是一种约定,它是浏览器最核心也最基本的安全功能。vue跨域的解决方法:1、JSONP;2、CORS;3、Proxy。
本教程操作环境:windows7系统、vue3版,DELL G3电脑。
跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的,是浏览器对JS实施的安全限制。
跨域本质是浏览器基于同源策略的一种安全手段
同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能
所谓同源(即指在同一个域)具有以下三个相同点
反之非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域
一定要注意跨域是浏览器的限制,你用抓包工具抓取接口数据,是可以看到接口已经把数据返回回来了,只是浏览器的限制,你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。
解决跨域的方法有很多,下面列举了三种:
而在vue
项目中,我们主要针对CORS
或Proxy
这两种方案进行展开
CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应
CORS
实现起来非常方便,只需要增加一些 HTTP
头,让服务器能声明允许的访问来源
只要后端实现了 CORS
,就实现了跨域
以koa
框架举例
添加中间件,直接设置Access-Control-Allow-Origin
请求头
1 2 3 4 5 6 7 8 9 10 |
|
ps: Access-Control-Allow-Origin
设置为*其实意义不大,可以说是形同虚设,实际应用中,上线前我们会将Access-Control-Allow-Origin
值设为我们目标host
代理(Proxy)也称网络代理,是一种特殊的网络服务,允许一个(一般为客户端)通过这个服务与另一个网络终端(一般为服务器)进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全,防止攻击
方案一
如果是通过vue-cli
脚手架工具搭建项目,我们可以通过webpack
为我们起一个本地服务器作为请求的代理对象
通过该服务器转发请求至目标服务器,得到结果再转发给前端,但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域
在vue.config.js
文件,新增以下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
通过axios
发送请求中,配置请求的根路径
1 |
|
方案二
此外,还可通过服务端实现代理请求转发
以express
框架为例
1 2 3 4 5 6 7 |
|
方案三
通过配置nginx
实现代理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
以上是vue的跨域是什么意思的详细内容。更多信息请关注PHP中文网其他相关文章!