consol|

Tod4

园龄:2年11个月粉丝:21关注:0

【Vue】前端解决跨域问题

Vue解决跨域问题

什么是跨域:违背了同源策略,即协议名、主机名、端口号必须一致。浏览器与服务器之间存在跨域问题,而服务器与服务器之间由于通过Http通信是不存在跨域问题的。

    如图所示,浏览器端口号8080与服务器5000不一致导致跨域问题,需要注意的是跨域问题并不是没有发送响应请求,而是在服务器响应给浏览器时,浏览器发现跨域而将数据隐藏了起来

解决跨域的策略

1 cors

大致思路:服务器在响应给浏览器数据时会在响应体中携带一些特殊的响应头以告知浏览器可以无视跨域问题

但是在开发中响应头是不能随便修改的,而且这种策略需要完全由后端进行

2 jsonp

大致思路:利用script标签的src属性不受同源跨域问题影响的特性

但是需要前后端同时进行修改,而且只能处理get请求

3 使用代理服务器(常用)

如此一来,8080端口的浏览器端和8080代理服务器通过ajax请求通信就不存在跨域问题,而且同时服务器和代理服务器是通过http通信,更不存在跨域问题

代理服务器的配置 方式一

vue.config.js

module.exports = {
pages: {
index: {
entry: 'src/main.js'
}
},
devServer: {
proxy: 'http://localhost:5000'
}
}

同时修改前端页面的请求端口号为代理服务器的8080

代理服务器的配置 方式二

devServer: {
proxy: {
// 路径中出现'/hikaru'时,代理服务器就开始工作
'/hikaru': {
// 目标服务器
target: "http://localhost:5000",
// 路径重写
pathRewrite: {'^/hikaru':''},
// 用于启用webSocket,webSocket也是客户端和服务器的通信方式
ws: true,
// 用于修改修改来源,为true则修改来源为与目标服务器相同
changeOrign: true
}
}
}
posted @   Tod4  阅读(1677)  评论(0编辑  收藏  举报
   
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起