目录axiOS跨域请求代理服务器配置axios跨域问题解决1.在Vue.config.js文件中做如下配置2.request.js(拦截器页面)如下配置3.具体请求页面如下配置axi
首先安装axios
npm install axios
然后在vue.config.js文件下配置如下代码
(若没有vue.config.js文件可以自己创建这个文件)
module.exports = {
devServer: {
open: true,
port: 8001,
proxy: {
'/apis': {
target: 'Http://localhost:8080/thinkPHP/personal_blog/public/personal.php/personal/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/apis': '' // rewrite path
}
},
}
}
};
其中open表示是否运行时就启动app,port表示我们当前vue页面的端口比如下面我的页面端口是8001那么这里就写8001
然后proxy中的代码就是跨域代理服务器的配置代码
其中target就是目标api接口,比如你们接口为 http://localhost:8080/api/login 那么target就可以写http://localhost:8080/api/
然后在项目中实际用我们就可以这么写
axios.post('/apis/login', postData)
.then(response => {
// post 成功,response.data 为返回的数据
console.log(response.data)
})
.catch(error => {
// 请求失败
console.log(error)
})
那个apis就是http://localhost:8080/api/ 也就是我们在target中配置的api接口,"/apis/"就是 pathRewrite中配置的
然后就可以请求成功了,我这里的后台是以tp5框架做为后台
这里我使用的是vuecli3.0最新版的脚手架
目录结构如下
其中初始创建时没有vue.config.js的文件,这个为自己手动创建
注意 修改成功后一定要重新启动项目
target
: 配置跨域请求的地址changeOrigin
: 是否跨域pathRewrite
: 路径重写**这里的baseURL要修改成与vue.config.js文件中设置代理名称(/api)相同的名字
(不需要做特殊配置)**
url
: 具体请求接口我是根据自己的项目配置的,大家可以自己对照一下,仅为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue3.0 axios跨域请求代理服务器配置方式
本文链接: https://www.lsjlt.com/news/146357.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-04-18
2024-04-17
2024-04-11
2024-04-08
2024-04-08
2024-04-03
2024-03-15
2024-03-15
2024-03-11
2024-03-08
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0