axios跨域接口

方法1

配置代理.png

请求.png

方法2

配置.png

请求.png

方法3

配置.png

image.png

config下的index.js

proxyTable: {
      '/api': {
          target: 'https://api.apiopen.top',//后端接口地址
          changeOrigin: true,//是否允许跨越
          pathRewrite: {
              '^/api': '',//重写,
          }
      }
}

mounted(){
    const url='/api'
    this.$axios.get(url+'/videoRecommend?id=127398')
    .then((res) => {
        console.log(res) //返回的数据
    })
    .catch((err) => {
        console.log(err) //错误信息
    })
  }

法4 完整的求情路径https://api.apiopen.top/videoRecommend?id=127398

image.png

image.png

mounted(){
    const url = '/demo'
    this.$axios.get(url+'/videoRecommend?id=127398')
    .then((res) => {
        console.log(res) //返回的数据
    })
    .catch((err) => {
        console.log(err) //错误信息
    })
  }

proxyTable: {
      '/demo': {
          target: 'https://api.apiopen.top',//后端接口地址
          changeOrigin: true,//是否允许跨越
          pathRewrite: {
              '^/demo': '',//重写,
          }
      }
  },

方法1
我们加了路径的重定向代码pathRewrite，上述代码以正则匹配规则将以"/api"开头的请求地址修改为""，也就是说，我们这样配置后，当我们请求"/api/videoRecommend"的时候，会被重写为请求"/videoRecommend"，直接在请求地址中将"/api"变成了""，由此刚好去掉了请求地址中多余的"/api"，由此，上述的404错误就得到了解决。
https://api.apiopen.top/videoRecommend?id=127398正常接口当我们把pathRewrite重写的时候会把‘/api'在请求时变为空