2020年1月20日

vue项目上线部署到iis设置反向代理解决跨域问题


该文章希望给IIS使用者分享前后端分离部署时,跨域请求的解决方案(反向代理),我们所说的反向代理,意在代理数据请求,静态资源还是原始站点。一般推荐nginx服务器,不过我还是更倾向于window系统,这种可视的系统,操作起来方便,既然是windows,所以php环境采用了iis套餐,于是就有了这种情况vue部署到iis。亲测已成功。

基础背景:
前端部署域名:vue.changlin.cn
前端数据请求地址:形如:vue.changlin.cn/api/****,重点是接口地址包含api这个关键字,接来下会使用
服务端:www.baidu.com
IIS要求:版本必须是IIS7及其以上

1.安装ARR(Application Request Routing)
下载地址:http://www.iis.net/downloads/microsoft/application-request-routing

2. 开启代理功能
打开第一步安装的ARR

打开右侧的操作面板最下方的 Server Proxy Settings… 选项,开启代理服务

3.配置反向代理规则(重点)

左侧操作菜单选择添加规则,新建一条入站规则,选择空白规则,(目的是匹配请求的URL,当符合我们添加的规则时,则进行反向代理的操作,文章的开头设定一种情形,假定所有的数据请求都是这种“vue.changlin.cn/api/****”,都是以api这个关键词开头,接来要做的就是写一个正则表达式来匹配需要反向代理的url请求)
填写匹配URL选项相关信息,采用与模式匹配的正则表达式,表达式为:^api/(.*),匹配所有前端站点的包含api的url请求

写文章开头说的前端站点的域名 vue.changlin.cn ,条件输入:{HTTP_HOST}(请求的主机名),模式:^www.baidu.com$(如果有端口可以加上端口)

填写反向代理最终指向的地址,前面我们所做的匹配,就是为了这一步所做的准备,操作类型是重写,URL填写:http://www.baidu.com/api/{R:1},注意前面匹配了URL中包含api关键词的URL,这里必须加上/api/{R:1},{R:1}是说api后面的参数都带者,例如:原始请求:http://vue.changlin.cn/api/get,重定向为:http://www.baidu.com/api/get

4.完成

做好所有工作以后测试 测试原始请求  http://vue.changlin.cn/api/get  能否获取到数据,如果可以,则访问前端站点,应该就已经成功了。

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签:, , ,