TypechoJoeTheme

香草物语

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

vue使用axios配置跨域

Laughing博主
2021-05-06
/
1 评论
/
1,173 阅读
/
184 个字
/
百度已收录
05/06
本文最后更新于2024年03月18日,已超过185天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

开发环境中,我们一般通过两种方式解决跨域:

  1. 让后端设置CORS,允许我们请求。
  2. 前端在webpack中设置proxyTable{}代理。

后端地址

我们这里简单模拟一下后台就可以了,请求路径为

http://localhost:8080/normal

前端配置

安装axios

通过npm安装axios

npm install axios --save

配置main.js

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'

修改代理

打开vue项目config文件夹下的index.js在里面把proxyTable: {}设置如下

proxyTable: {
      '/api': {
        target:'http://localhost:8080', // 请求后台的地址
        changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写,
          '^/api': ''  // 替换target中的请求地址,相当于前台请求/api/xx会替换成http://localhost:8080/xx。
        }
      }
    },

测试

 this.$axios.get('/normal').then(res=>{
      console.log(res)
    })
朗读
赞(2)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

香草物语

本文链接:

https://www.xiangcaowuyu.net/web/vue-uses-axios-to-configure-cross-domain.html(转载时请注明本文出处及文章链接)

评论 (1)
  1. eric 闲逛
    Android · Google Chrome

    {!{data:image/webp;base64,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}!}

    2021-05-07 回复
  2. fdsfs 闲逛
    MacOS · Google Chrome

    fadsfsf厉害啦啊

    2019-10-17 回复