vue请求服务器上的json数据跨域问题

最新推荐文章于 2024-03-08 16:38:32 发布

花瘦为春心

最新推荐文章于 2024-03-08 16:38:32 发布

阅读量1.7k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45372546/article/details/112360266

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue请求服务器上的json数据跨域问题

开发环境

问题：
本地直接使用axios请求会报跨域错误
在这里插入图片描述

解决方法：
在config文件下找到index.js，vue-cli3没有config文件的需要自己在根目录创建vue.config.js文件。

    proxyTable: {
      '/json': {
        target:"http://xx", //你请求的地址
        changeOrigin: true,
        pathRewrite: {
          '^/json': 'http://xx' //替换target中的地址，项目中请求http://xx就直接写成/json就可以了
        }
      },
    },
  },

修改完配置后，需要重新 npm run dev

生产环境：

配置完后本地请求就不会报跨域了
再在发起请求的地方加上一个判断就可以兼顾线上的请求问题
解决方法：

          let mapDataUrl = ''
          if(process.env.NODE_ENV === 'development'){//判断是否是开发环境
            mapDataUrl = '/json'+'xx'+'.json'//开发网址用刚才的配置好的/json
          }else{
            mapDataUrl = 'http://xx'+'xx'+'.json'//生产环境的网址直接写
          }
          this.$axios({
            url:mapDataUrl,
          })