1. 程式人生 > >Vue 2.x 如何利用proxyTable實現跨域請求(反向代理)

Vue 2.x 如何利用proxyTable實現跨域請求(反向代理)

在專案執行的時候嗎,不可缺少就是的設定反向代理的
詳細的文件 http-proxy-middleware
下載的官方的腳手架開啟檔案的build/dev-server.js

搜尋:(這個外掛官方已經下載好了,只需要簡單的配置一下就好的)

var proxyMiddleware = require('http-proxy-middleware')//獲取外掛

新增下列程式碼:
方法一:

app.use('/api', proxyMiddleware({
  target: 'http://xxxx.weddingee.com/', //域名的配置,
  changeOrigin:true,//
通過設定changeOrigin:true 開啟代理 }));

修改腳手架的東西后一定要npm run dev

全域性配置axios的方法:

npm  install axios -D

main.js

import axios from 'axios'
// Vue.prototype.axios = axios //元件呼叫this.axios.get(...)
// Vue.prototype.$ajax = axios  //換個名字 元件呼叫this.$ajax.get(...)
window.axios = axios;  //元件中呼叫 axios.get(...)

元件中呼叫的方法:

getData(){
  axios.get('/api/work/home')  //api是前端自己新增的 
     .then(function (res) {
       console.log(res);
     })
     .catch(function (error) {
       console.log(error);
     });
 }

方法二:config/index.js

   proxyTable: {
      firstProxy: {
        target: 'http://dingee.com/',
        filter(pathname, req) {
          //
console.info('firstProxy',req) const isApi = pathname.indexOf('/api') == 0; const ret = isApi; return ret; }, changeOrigin: true, }, }

修改腳手架的東西后一定要npm run dev
呼叫的方法省略。