vue4 axios代理跨域

最新推荐文章于 2023-03-29 12:32:37 发布

原创最新推荐文章于 2023-03-29 12:32:37 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了在Vue CLI项目中使用axios时如何通过devServer.proxy配置解决跨域问题。通过新建vue.config.js文件并正确设置空格格式，避免ESLint错误，实现了前端跨域请求的解决方案。此外，还分享了寻找解决方法的过程和官方文档的重要性。

常见跨域的解决办法
 前端常见跨域解决方案（全）

vue cli webpack相关

vue cli 的 devServer.proxy配置

axios中文说明
在这里插入图片描述
新建文件vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {// 使用"/api"来代替"http://f.apiplus.c"
        // target: 'http://192.168.0.102:8080', // 源地址
        target: 'http://118.178.84.155:5050/api', // 源地址
        changeOrigin: true, // 改变源
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
}

this.$axios.get('/api/4g/status').then((res) => {
      console.log(res)
    })

分割线

这里一定注意为什么一直爆红波浪线，因为开启了eslints，格式有问题
在这里插入图片描述
找了好久，才发现是空格的问题，只让空两格而tab键是四格

这里特别感谢我王哥
最初是为了解决跨域问题

侬，就是这个
在这里插入图片描述
服务器和本地的地址不一样，浏览器的保护策略，不同源不能访问
这里不叙述什么是同源等等
就记录问题出现和解决的过程

百度了好多vue如何解决跨域什么的，搜出来的都不是想要的答案

在这里插入图片描述
问了那边前端的，没得到相应的答案，最后还是王哥厉害
他丢给我一个链接
他让我全局搜proxy
搜devServer
然后找到对应的配置放在哪里的
我就去官网找，也就是最开头那两个官网，
后来就被我弄好了，其实也不难
在这里插入图片描述
反正开心了，干别的去了

vue4 axios代理 跨域

分割线

vue4 axios代理跨域