vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > axios跨域请求代理服务器配置

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

作者: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文件中做如下配置

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

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

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

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

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

您可能感兴趣的文章:
阅读全文