通常情況下的Vue應用都使用Nginx部署，Nginx有專門的反向代理設置，但若將Vue應用部署在IIS中，針對Vue應用中設置的接口跨域，IIS需要進行反向代理設置。
跨域的設置分為開發環境和生產環境，在Vue-cli搭建的應用，開發環境解決跨域通常是在配置文件中使用proxy進行反代理，生產環境則需要使用反向代理。
Nginx的反向代理不做介紹，網上有很多，本文主要介紹IIS中設置反向代理。
步驟
一、IIS中安裝ARR（Application Request Routing Cache），下載地址：
https://www.iis.net/downloads/microsoft/application-request-routing
二、IIS中安裝urlrewrite,下載地址:
https://www.iis.net/downloads/microsoft/url-rewrite
三、配置ARR
1.重新打開iis，找到Application Request Routing Cache,打開功能
2.然后選擇Proxy，點擊按鈕
選擇啟用代理，並應用設置
Enabled proxy：打勾
HTTP version：HTTP/1.1（默認是pass through）
四、配置url重寫
選擇部署的網站，點擊url重寫 打開功能，右側添加規則
選擇默認的空白入站規則：
編寫相關信息，名字自己定，主要是配置操作
附上我的配置信息：
名稱：baiducors(可以隨便寫 我這邊用的百度人臉識別接口)
匹配URL
請求的URL(與模式匹配)
使用：通配符 或者 正則表達式 看具體需要
模式：*baiduApi/* （備注：這里可以點擊測試模式 自己看看重定向的地址是否正確）
條件：無
服務器變量：無
操作：重寫
操作屬性：https://aip.baidubce.com/{R:2}
附加查詢字符串：打勾
停止處理后續規則：打勾
五、重新啟動下IIS，至此反向代理設置完事
補充：針對跨域設置，iis還可以單獨設置
HTTP響應
找到網站，打開HTTP響應標頭設置
| Access-Control-Allow-Headers | Content-Type,api_key,Authorization |
| Access-Control-Allow-Methods | GET,POST,PUT,DELETE,OPTIONS |
| Access-Control-Allow-Origin | * |
其中
Access-Control-Allow-Headers表示請求消息頭；
Access-Control-Allow-Methods表示請求方法；
Access-Control-Allow-Origin表示請求來源，“*”表示不限定
六、拓展
項目在實際使用過一段時間后，發現通過iis設置的跨域設置不是很穩定，頻繁多次訪問，會請求失敗或者耗時時間比較長，在Vue的項目中調用第三方接口，比如獲取定位與逆地址解析等，很影響使用，因此更換了方式，在vue中使用jsonp的方式解決跨域。
1、安裝 vue-jsonp
npm install vue-jsonp --save
2、在main.js中引入
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
3、示例調用的api
new Promise((resolve, reject) => {
console.log("逆地址解析開始");
var geocoderUrl = "https://apis.map.qq.com/ws/geocoder/v1";
console.log("逆地址解析請求地址："+geocoderUrl);
_this.$jsonp(geocoderUrl,{
key:_this.mapkey,
location:coordinates,
output: "jsonp"
})
.then(res => {
console.log(res);
resolve(res);
})
.catch((err) => {
reject(err);
})
}).then(data => {
if(data.status!=0){
obj.success = false;
obj.msg = data.message;
!!Callback && Callback(obj);
}
obj.result = data.result;
!!Callback && Callback(obj);
}).catch(error => {
console.log(error);
_this.$messagebox.alert('逆地址解析失敗！'+ JSON.stringify(error));
obj.success = false;
!!Callback && Callback(obj);
});
需要注意的是，因為引入了vue-jsonp，所以可以直接使用this.$jsonp, Vue.use(VueJsonp）方法里把$jsonp賦給vue原型了：Vue.prototype.$jsonp = jsonp
即output: "jsonp"是必須的，
接口中需要加入 output 參數來告訴騰訊地圖訪問請求為 jsonp ；
