IIS上开启反向代理实现Vue项目接口跨域处理
通常情况下的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 ；
