Vue配置代理解决跨域

我们在发送数据请求的时候经常会遇到跨域的情况。

如:我们使用axios向http://localhost:5000/test端口发送请求,结果跨域了:

解决跨域请求有如下几种方式:后端设置cors,jsonp,vue-cil配置代理。

配置代理可以理解为Vue为你开了一台和你端口号相同的服务器,将浏览器和服务器之间的通话转化为服务器与服务器之间进行通话。

一、方式一

(一)配置代理服务器

在vue.config.js文件下配置代理服务器:

devServer: {

proxy:'xxx' // 服务器端口

}

注意:这里的端口是目标访问服务器的端口号

(二)发送axios请求

发送axios请求的端口号为本机端口号:

以上步骤完成后即可解决请求跨域问题

(三)使用该方式的缺点

  1. 不能配置多个代理。

  2. 不能灵活地控制该请求是否走代理。

二、方式二

(一)配置代理服务器

如果使用该写法,就能够配置多个代理服务器,还能灵活控制是否走代理。

在vue.config.js中配置代理服务器:

devServer: {

proxy: {

// 配置所有以 '/api1' 开头的请求路径

'/api1': {

target: 'xxx', // 代理目标的端口路径

pathRewrite: { '^/api1': '' }, // 替换请求路径中的字符

changeOrigin:true // 是否更改配置代理服务器的端口号

},

// 配置所有以 '/api2' 开头的请求路径

'/api2': {

target: 'xxx',

pathRewrite: { '^/api1': '' },

changeOrigin:true

},

}

}

(二)发送axios请求

注意:要在发送的请求路径后添加在配置代理中设置的 '/api'

通过哪个配置代理服务器发送请求就添加设置的哪个api

相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互