【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 } } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步