首页 > web前端 > js教程 > vue proxyTable怎么实现接口跨域请求调试

vue proxyTable怎么实现接口跨域请求调试

php中世界最好的语言
发布: 2018-04-18 09:54:08
原创
2369 人浏览过

这次给大家带来vue proxyTable怎么实现接口跨域请求调试,vue proxyTable实现接口跨域请求调试的注意事项有哪些,下面就是实战案例,一起来看一下。

在不同域之间访问是比较常见,在本地调试访问远程服务器。。。。这就是有域问题。

VUE解决通过proxyTable:

在 config/index.js 配置文件

 dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  //proxyTable: {},
  proxyTable: proxyConfig.proxyList,
  // css Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
 }
登录后复制

划红线部分就是设置代理参数:

在config目录创建,proxyConfig.js 写入

module.exports = {
 proxyList: {
    '/apis': {
      // 测试环境
      target: 'https://goods.footer.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite重写的,
      }       
    }
 }
}
登录后复制

在 config/index.js 配置文件上边引入

var proxyConfig = require('./proxyConfig')
登录后复制

使用:

服务器提供接口:https://goods.footer.com/health/list

Vue请求

var obj = {
  pageSize: 20
}
this.$http.get( '/apis/health/list',{params: obj})
      .then(function(res){
    // 成功回调
      },function(){
       alert("error")
      })
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Node.js中如何操作mongodb数据库

vue+query传参步奏详解

以上是vue proxyTable怎么实现接口跨域请求调试的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板