通过Vue解决跨域问题（proxy配置代理）

当我们在用本机去找服务器要数据时会产生跨域问题，所以利用vue-cli去开启一个代理服务器。

方法一：

在vue.config.js中添加如下配置

//开启代理服务器(方式一)devServer: {
//请求服务器的地址proxy: 'http://localhost:5000'}

配置成功之后必须要重新启动脚手架，否则不会开启代理服务器

请求时：

axios.get("http://localhost:8081/students").then((response) => {console.log("请求成功了", response.data);},(error) => {console.log("请求失败了", error.message);});

优点：配置简单，当请求资源时直接发给前端（8080）即可

缺点：不能配置多个代理，只能配置一个代理服务器，不能灵活的控制请求是否走代理。

工作方式：按照上述配置代理，当请求资源不存在时，请求会转发给服务器（优先匹配前端资源）

方法二：

在vue.config.js中添加如下配置

//开启代理服务器(方法二)devServer: {proxy: {//  '/yu'为请求前缀，用于控制是不是走代理，想走代理时就在请求前缀前边加上这个请求前缀'/yu': {target: 'http://localhost:5000',pathRewrite: { "^/yu": "" }, //重写路径  匹配以/yu为开头的路径都变为空字符串 ws: true, //用于支持websocketchangeOrigin: true //用于控制请求头中的host值},'/demo': {target: 'http://localhost:5001',pathRewrite: { "^/demo": "" },ws: true, //用于支持websocketchangeOrigin: true //用于控制请求头中的host值},}}

请求时：

请求前缀必须跟着端口号

getStudents() {axios.get("http://localhost:8081/yu/students").then((response) => {console.log("请求成功了", response.data);},(error) => {console.log("请求失败了", error.message);});},getCars() {axios.get("http://localhost:8081/demo/cars").then((response) => {console.log("请求成功了", response.data);},(error) => {console.log("请求失败了", error.message);});},

优点：可以配置多个代理，灵活的控制请求是否走代理

缺点：配置略繁琐，请求资源时必须加前缀

通过Vue解决跨域问题（proxy配置代理）相关推荐

vue解决跨域问题-反向代理Proxy
浏览器有同源策略,限制同协议.同域名.同端口,只要有一项不一致,就是跨域.(不同源则跨域) 解决方案: 后端 .CORS .JSONP. 反向代理Proxy 同源下:浏览器向服务器请求数据,服务器响应 ...
vue 解决跨域调试_Electron-vue解决跨域
Electron-vue解决跨域博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 介绍在前后端分离开发的时候就会遇到跨域的问题 ...
vue 解决跨域调试_vue+Java后端进行调试时解决跨域问题的方式
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...
js webpack 解决跨域问题_webpack-dev-server 作代理解决跨域，让你的本地开发飞起来...
最近在接到一个需求是做一个可视化的监控系统,mock数据来开发的话实在不太方便,况且数据量之大.查了一下资料,可以用webpack-dev-server作为代理,直接请求线上,哈哈哈,是不是很方便. ...
vscode vue解决跨域_Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async）...
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
Vue解决跨域多个target问题（配置多个代理问题）
devServer: {publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/',proxy: { ...
vscode vue解决跨域_在vs code 中如何创建一个自己的 Vue 模板代码
首先,在vs code 中打开定义模板代码的地方第一步,点击"设置"图标按钮,在弹出的菜单中点击的"用户代码片段"(也就是模板) 第二步,在弹出的框中选择新建 ...
vue解决跨域问题- vue-jsonp
第一步:在vue项目中安装上vue-jsonp npm i vue-jsonp --save 第二步:在vue项目中main.js导入 import { VueJsonp } from 'vue-js ...
【一文带你解决跨域问题】
唠嗑部分在前后端分离项目中,ajax是数据交互中不可缺少的一个js库,它能够实现局部刷新,替代原生全局刷新对用户的冲击感,提升了用户体验,目前像jQuery-ajax, 基于Promise风格的ax ...
proxy跨域不生效_vue-cli3.0使用proxytable解决跨域问题
现代的web开发一般都是前后端分离,前后端使用rest api进行交互,分离使得前后端服务器一般都不在一起,这导致了跨域问题,本文说明在vue-cli中解决这一问题跨域问题简述如果浏览器有类似下面 ...

通过Vue解决跨域问题（proxy配置代理）

通过Vue解决跨域问题（proxy配置代理）相关推荐

最新文章

热门文章