vue使用proxyTable解决跨域问题

废话不多说,直接上主题。

当后端给我们一个固定接口ip,

//接口ip
baseUrl = 'http://www.baidu.com/baidu/'

//登录接口
login = 'http://www.baidu.com/baidu/login'

开始设置跨域
1,如果重写地址,重写的地址最好是后端已给的固定地址,此处为 ‘/baidu’

    proxyTable: {
      '/api': {
        target: 'http://www.baidu.com', //目标接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/baidu' //重写接口,作用是用来和target进行拼接 http://www.baidu.com/baidu/
        }
      },
      cssSourceMap: false
    }

使用

//    此时  '/api' 代表的就是'http://www.baidu.com/baidu'
//			'/api/login' 代表的就是'http://www.baidu.com/baidu/login'

this.axios.post('/api/login',info)

2,如果没有固定地址

 proxyTable: {
      '/api': {
        target: 'http://www.baidu.com', //目标接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/' //重写接口,可以为空'',也可以为'/'
        }
      },
      cssSourceMap: false
    }

使用

//    此时  '/api' 代表的就是'http://www.baidu.com'
//			'/api/baidu/login' 代表的就是'http://www.baidu.com/baidu/login'

this.axios.post('/api/baidu/login',info)

在这里插入图片描述

发布了17 篇原创文章 · 获赞 43 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/mf_717714/article/details/88822795