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

相关推荐
还有多远.5 分钟前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者12 分钟前
web 网页数据传输处理过程
前端
非凡ghost14 分钟前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
w2sfot22 分钟前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴37 分钟前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
吃饭最爱40 分钟前
html的基础知识
前端·html
我没想到原来他们都是一堆坏人41 分钟前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python
前端Hardy1 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy1 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙1 小时前
替代 Object.freeze 的精准只读模式
前端·javascript