在vue單頁(yè)應(yīng)用項(xiàng)目開(kāi)發(fā)時(shí)，避免不了要請(qǐng)求后端，這時(shí)通常就會(huì)出現(xiàn)跨域問(wèn)題。有2種常用的解決方案

后端設(shè)置允許跨域訪(fǎng)問(wèn)

前端通過(guò)代理進(jìn)行訪(fǎng)問(wèn)后端

下面我們只說(shuō)說(shuō)如何配置vue-cli代理訪(fǎng)問(wèn)：

vue-cli代理

最簡(jiǎn)單就是配置vue conifg進(jìn)行實(shí)現(xiàn)

下面配置3個(gè)請(qǐng)求的后端，分別是：

請(qǐng)求http://localhost:4201/adminapi/*會(huì)代理請(qǐng)求http://localhost:8180/*

請(qǐng)求http://localhost:4201/portalapi/*會(huì)代理請(qǐng)求http://localhost:8185/*

請(qǐng)求http://localhost:4201/securityapi/*會(huì)代理請(qǐng)求http://localhost:8089/*

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

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出于安全考慮，默認(rèn)檢查hostname，如果hostname 不是配置內(nèi)的，將中斷訪(fǎng)問(wèn)。
 },
 //...
}

Nodejs做中間時(shí)行路由轉(zhuǎn)發(fā)

可以用nodejs和框架express對(duì)請(qǐng)求做路由轉(zhuǎn)發(fā)。

在生產(chǎn)環(huán)境下更可以免去使用nginx配置反向代理。

方案各有利弊，技術(shù)架構(gòu)選型時(shí)需要針對(duì)自己的項(xiàng)目環(huán)境，并且適合自己的團(tuán)隊(duì)是最好的。

后端跨域訪(fǎng)問(wèn)

后端的跨域訪(fǎng)問(wèn)設(shè)置也是比較簡(jiǎn)單的，不同語(yǔ)言JAVA PHP Python Go的設(shè)置也大同小異。

查詢(xún)一下都有比較多的資料，但在生產(chǎn)環(huán)境下，為了安全起見(jiàn)，還是建議不要設(shè)置允許跨域訪(fǎng)問(wèn)，或者限制允許跨域的IP

補(bǔ)充知識(shí)：Vue 過(guò)濾器filter調(diào)用data、methods中的東西報(bào)錯(cuò)

今天學(xué)習(xí)了filter，我將過(guò)濾的過(guò)濾方法放到methods中發(fā)現(xiàn)怎么調(diào)用都說(shuō)沒(méi)有這個(gè)function

然后我把log了一下這個(gè)this 發(fā)現(xiàn)這個(gè)this指向的竟然是window

于是網(wǎng)上找到了如下的解決方法：

定義一個(gè)全局變量:

let that;

在beforeCreate生命周期將this賦值給that，通過(guò)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項(xiàng)目配置跨域訪(fǎng)問(wèn)和代理proxy設(shè)置方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論