Vue3.0 axios跨域请求代理服务器配置方式

更新时间：2022年04月18日 11:50:55 作者：tdl081071tdy

这篇文章主要介绍了Vue3.0 axios跨域请求代理服务器配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

axios跨域请求代理服务器配置

首先安装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的文件，这个为自己手动创建

注意修改成功后一定要重新启动项目

axios跨域问题解决

1.在vue.config.js文件中做如下配置

target: 配置跨域请求的地址
changeOrigin: 是否跨域
pathRewrite: 路径重写

2.request.js(拦截器页面)如下配置

**这里的baseURL要修改成与vue.config.js文件中设置代理名称(/api)相同的名字

3.具体请求页面如下配置

(不需要做特殊配置)**

url: 具体请求接口

我是根据自己的项目配置的，大家可以自己对照一下，仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-router钩子函数实现路由守卫
这篇文章主要介绍了vue-router钩子函数实现路由守卫，对vue感兴趣的同学，可以参考下
2021-04-04
35个最好用的Vue开源库(史上最全)
无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。本文主要介绍了35个最好用的Vue开源库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
Vue最新防抖方案(必看篇)
今天小编就为大家分享一篇Vue最新防抖方案(必看篇)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue单页应用中如何使用jquery的方法示例
最近在工作中遇到的一个需求，需要在vue-cli建立的应用中引入jquery的方式，通过查找相关的资料最终解决了，所以这篇文章主要给大家介绍了关于在vue单页应用中如何使用jquery的方法示例，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
vue elementUI使用tabs与导航栏联动
这篇文章主要为大家详细介绍了vue elementUI使用tabs与导航栏联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
Vue集成阿里云做滑块验证的实践
滑块验证是比较常见的人机鉴别的方法，本文主要介绍了Vue集成阿里云做滑块验证，具有一定的参考价值，感兴趣的可以了解一下
2022-01-01
记录一个Vue3简易微信右滑删除逻辑的思路实现
本文主要介绍了记录一个Vue3简易微信右滑逻辑的思路实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
解决Vue 刷新页面导航显示高亮位置不对问题
这篇文章主要介绍了解决Vue 刷新页面导航显示高亮位置不对问题,本文图文实例相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
vue3使用vue-i18n的方法详解(ts中使用$t, vue3不用this)
所谓的vue-i18n国际化方案就是根据它的规则自己建立一套语言字典,对于每一个字（message）都有一个统一的标识符,下面这篇文章主要给大家介绍了关于vue3使用vue-i18n(ts中使用$t, vue3不用this)的相关资料,需要的朋友可以参考下
2022-12-12
Vue打包上线之后部分CSS不生效问题的解决办法
在vue项目中开发环境的样式没问题,但是打包上线后,样式不生效,下面这篇文章主要给大家介绍了关于Vue打包上线之后部分CSS不生效问题的解决办法,需要的朋友可以参考下
2022-12-12