在前端調(diào)試的時(shí)候，跨域一直都是一個(gè)比較麻煩的問(wèn)題，這個(gè)在之前的文章 關(guān)于跨域問(wèn)題的一個(gè)解決方法 中其實(shí)已經(jīng)討論了一些可以使用的方法。

如果要使用 JSONP，第一是需要修改的地方比較多，而且也不太符合前端發(fā)展的大趨勢(shì)，如果使用 CORS 的話并沒(méi)有 application/json 類(lèi)型。而且更重要的是這只是在前端調(diào)試時(shí)候的需求，并不是在上線以后的需求，所以對(duì)后端有太多的入侵也不好。

所以就有一個(gè)念想突然在大腦中閃過(guò)——加入有一個(gè)代理不就可以解決這個(gè)問(wèn)題了？但是又想了一下寫(xiě)起來(lái)還挺麻煩，于是就被擱置了。

直到前幾天 Stone 提到其實(shí) webpack-dev-server 早就想到并且已經(jīng)幫我們實(shí)現(xiàn)了。

于是，我就在一個(gè) Vue 項(xiàng)目中進(jìn)行測(cè)試，發(fā)現(xiàn)真的很贊，既可以本地 Server 熱加載，還可以直接跨域調(diào)用遠(yuǎn)程 API，完美解決了之前遇到的所有問(wèn)題。

接下來(lái)我簡(jiǎn)要介紹一下步驟（以一個(gè) Vue 腳手架建立的 webpack 項(xiàng)目為例）：

首先檢查 build/webpack.dev.conf.js 中是否有

proxy: config.dev.proxyTable,

這個(gè)配置項(xiàng)，如果被注釋掉，請(qǐng)打開(kāi)注釋?zhuān)绻麤](méi)有，請(qǐng)加入到 devServer 對(duì)象中

然后在 config/index.js 中的 dev 對(duì)象中加入 proxyTable 配置項(xiàng)：

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

前面的鍵 /** 意思是代理所有請(qǐng)求，如果代理某些請(qǐng)求，可以將其改為諸如 /api 之類(lèi)的字符串。

后面的 target 就是要代理到的網(wǎng)站，changeOrigin 的意思就是把 http 請(qǐng)求中的 Origin 字段進(jìn)行變換，在瀏覽器接收到后端回復(fù)的時(shí)候，瀏覽器會(huì)以為這是本地請(qǐng)求，而在后端那邊會(huì)以為是在站內(nèi)的調(diào)用。

這樣，通過(guò)這個(gè)簡(jiǎn)單的配置，就完美地解決了跨域的問(wèn)題。

之后，在直接運(yùn)行

npm run dev

的時(shí)候，就可以將測(cè)試前端中的 ajax 請(qǐng)求代理到后端服務(wù)器進(jìn)行測(cè)試?yán)玻?/p>

最后，貼上官方文檔，具體的配置大家可以參考這里：

https://webpack.js.org/configuration/dev-server/#devserver-proxy

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論