Rumah > hujung hadapan web > tutorial js > vue-cli做出跨域请求

vue-cli做出跨域请求

php中世界最好的语言
Lepaskan: 2018-06-11 10:18:38
asal
1317 orang telah melayarinya

这次给大家带来vue-cli做出跨域请求,vue-cli做出跨域请求的注意事项有哪些,下面就是实战案例,一起来看一下。z

前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可。

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/api':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/api': ''
        }
      }
    }
  }
}
Salin selepas log masuk

 这时在你想请求接口的url处,输入/api/look/1 即可实现跨域请求。

这时如果打开F12会发现请求的url是localhost:8080/api/look/1,这其实是虚拟从本地请求数据,这样就不会有跨域的问题产生了。

一般情况下上面的方法是没有问题的,要是上面的方法行不通,可以试试这样写:

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/look':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/look': '/look'
        }
      }
    }
  }
}
Salin selepas log masuk

这时在你想请求接口的url处,输入/look/1 即可实现跨域请求。

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

推荐阅读:

Vue+Nuxt.js做出服务端渲染

Google发布了哪些编写JS代码规范

Atas ialah kandungan terperinci vue-cli做出跨域请求. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan