Vue項目配置跨域訪問和代理proxy設置方式

在vue單頁應用項目開發時，避免不了要請求后端，這時通常就會出現跨域問題。有2種常用的解決方案

后端設置允許跨域訪問

前端通過代理進行訪問后端

下面我們只說說如何配置vue-cli代理訪問：

vue-cli代理

最簡單就是配置vue conifg進行實現

下面配置3個請求的后端，分別是：

請求http://localhost:4201/adminapi/*會代理請求http://localhost:8180/*

請求http://localhost:4201/portalapi/*會代理請求http://localhost:8185/*

請求http://localhost:4201/securityapi/*會代理請求http://localhost:8089/*

由于vue-cli是基于webpack，因此webpack的devServer選項都是支持配置的

module.exports = {
 // ...
 devServer: {
   port: 4201,
   proxy: {
    '/adminapi': {
     target: 'http://localhost:8180',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/adminapi': ''
     }
    },
    '/portalapi/': {
     target: 'http://localhost:8185/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/portalapi': ''
     }
    },
    '/securityapi/': {
     target: 'http://localhost:8089/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/securityapi': ''
     }
    }
   },
   disableHostCheck: true, // 這是由于新版的webpack-dev-server出于安全考慮，默認檢查hostname，如果hostname 不是配置內的，將中斷訪問。
 },
 //...
}

Nodejs做中間時行路由轉發

可以用nodejs和框架express對請求做路由轉發。

在生產環境下更可以免去使用nginx配置反向代理。

方案各有利弊，技術架構選型時需要針對自己的項目環境，并且適合自己的團隊是最好的。

后端跨域訪問

后端的跨域訪問設置也是比較簡單的，不同語言JAVA PHP Python Go的設置也大同小異。

查詢一下都有比較多的資料，但在生產環境下，為了安全起見，還是建議不要設置允許跨域訪問，或者限制允許跨域的IP

補充知識：Vue 過濾器filter調用data、methods中的東西報錯

今天學習了filter，我將過濾的過濾方法放到methods中發現怎么調用都說沒有這個function

然后我把log了一下這個this 發現這個this指向的竟然是window

于是網上找到了如下的解決方法：

定義一個全局變量:

let that;

在beforeCreate生命周期將this賦值給that，通過that獲得

var vm = new Vue({
  el: '#app',
  data: {
  },
  beforeCreate: function () {
    that = this
  },
  methods:{
   fom(fmt){
    ...
   }
  },
  ....,
  filters: {
       dateformate: function (val) {
         return that.fom("yyyy-MM-dd")
       }
     }
  })

以上這篇Vue項目配置跨域訪問和代理proxy設置方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。