提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue axios跨域问题的三种解决方案_vue如何实现跨域

Vue跨域解决方案 问题 实现 如何 三种 Axios
2023-06-13 09:13:41 时间

大家好，又见面了，我是你们的朋友全栈君。

vue3为例：

  • 【vue.config.js】文件，目录里面没有的话需要真机创建 代理的它通俗意思：我这里设置api意思就是在遇到于/api开始的接口的时候，间本地地址转化为接口地址 如：http://localhost:8080/api 等价于 http://123.123.122.166:3101 
module.exports = {
  devServer: {
    proxy: {
      '/api': {       
        // 目标的路径
        target: 'http://123.123.122.166:3101',  //也就是接口地址
        // 允许跨域
        changeOrigin: true,
        // 重写跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在main.js的axios调用接口的时候

//这个是我采用了开发时和发布时的环境设置
//方法1
const BASEURL = process.env.NODE_ENV === 'production' ? '' : '/api' 
let instance = axios.create({
  baseURL: BASEURL,
  timeout: 30000,
  withCredentials: true
})
​
// 如果你们不需要搞开发时还是发布时就这样
//方法2：
let instance = axios.create({
  baseURL: '/api',   //这里就是vue.config.js文件里面设置的代理 /api
  timeout: 30000,
  withCredentials: true
})

//或者
axios.defaults.baseURL = "/api";

使用的时候

methods:{
    async addClick(){
        let {data:res} = await this.$http.get('/user/mobileLogin',{params:{userName:this.userName,passWord:this.passWord}})
    }
}

请求的网络如上图，前部分 http://localhost:8080/api 会在浏览器内部等价于 http://123.123.122.166:3101 接口地址，使用实际上的请求是 http://123.123.122.166:3101/user/mobileLogin?userName=admin&password=123456

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/197309.html原文链接：https://javaforall.cn

相关文章