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,
          })

 

搞Google地图的时候，
本地是可以显示的，
但是到了服务器上地图一直显示不出来，
火狐打开F12，发现是找不到json的文件，

本来还以为是IIS中"请求筛选"的问题，后来发现不是...

解决办法..:..:.:.....:.
去IIS中的"MIME类型"，加入文件扩展名为".json"，MIME类型为"text/plain",（"text/json"更合适?）
再"确定"即可...

 
转载于:https://www.cnblogs.com/love-zf/p/5881766.html

在前端开发过程中，当后台服务器开发数据还没完善，无法与我们交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。

vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件，vuecli3、4没有static文件夹了，那咋办？有人说我创一个static文件夹在下面继续写json文件不就行了。但结果会报错，请求404找不到文件。


1. @vue/cli已经默认将静态文件改存在public文件夹下了。

static文件夹在配置中已经识别不出了。我们在public文件夹下编写json文件作为模拟数据：



2. 项目安装axios，导入axios，创建get()异步请求：



这里可能会有朋友疑问了，诶？请求路径不应该是'public/data/xx.json'吗？注意了如果路径这样写反而会报错404找不到。
3. 转发api路径代理设置。

开发情况下我们像上面这样改写路径其实是不合理的，默认我们将相对路径写为'/api/xxx'，那如何将/api指向实际的数据文件路径，实现转发？旧版本下我们会在vue.config.js下配置proxy属性，但新版本这个js文件已经不在目录下了，我们需要手动创建。
//在根目录下创建vue.config.js,如下配置：
module.exports = {
    devServer: {
      proxy: {  
        '/api': {
          target: 'http://localhost:8080', //路径指向本地主机地址及端口号
          ws: true, 
          changeOrigin: true,
          pathRewrite:{
              '^/api': '/data' //路径转发代理
          }
        }
      }
    }
  }



4. 将axios请求路径更改为/api。



做完以上步骤和避开雷区，已经可以成功在vuecli3、4版本项目上请求到本地json文件的数据了。等到和后台对接时，只要和后台工作人员确认好数据所在的主机地址端口号和存放路径，更改vue.config.js文件配置即可。

在前端开发过程中，当后台服务器开发数据还没完善，无法与前端进行交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。

vue-cli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件，然而vuecli3、4没有static文件夹了。若创建一个static文件夹在下面存放json文件，在实际调用过程中会报错，提示请求404。因此本文将提供两种方法调用本地的json文件。
1. 利用Axios请求调用本地json文件
Vue cli3削减掉static文件夹，取而代之的是在项目根目录下（与src同级）生成public文件夹，用于存放静态资源，如下图所示，可以将本地json文件放到public文件夹下。



利用axios的get请求方式，可以调用上述json文件。
axios.get('/confidence-band.json').then(res => {
	console.log(res.data)
})

需注意，axios是异步的，如果转成同步进行，需要在外函数添加async，axios前加await。
2. import直接调用（推荐）
上述方式本地json文件必须存放指定位置，同时还要考虑同步异步的问题。利用import引用，本地json文件无需存放指定位置，以存放assets文件夹下的json文件夹为例。



引用及调用：
import confidence_band_json from '@/assets/json/confidence-band.json' // 引用

let data = confidence_band_json // 调用

两种方式各自有使用场景，若无要求，建议使用第二种方式，调用更为简单。