VUE项目IIS部署使用nginx代理访问后端接口方式
作者：-清欢有味
文章浏览阅读704次。文章讲述了项目使用vue-element-admin遇到的跨域问题，尝试了浏览器JS、打包路径、路由模式和IIS代理等方法均无效，最终通过配置Nginx进行后端接口代理解决了问题，同时提供了参考文档链接。
VUE IIS部署使用nginx代理访问后端接口
项目使用 vue-element-admin 方案，采用History模式打包后部署在IIS，在访问接口时状态返回200，但是响应提示
We're sorry but Vue Admin Template doesn't work properly without JavaScript enabled. Please enable it to continue.
搜索发现可能的原因
1.浏览器JS未启用
2.vue项目打包路径有问题
3.vue路由模式需要改成hash模式
4.接口代理问题
已经尝试方法
浏览器JS已经启用，
尝试修改publicPath 从 "./" "/" "/xx/" 都无法解决这个问题
尝试将vue路由模式由history修改为hash模式也无法正常访问接口
尝试使用IIS 的ARR代理接口，仍无法解决（这个方法可能是我没有弄明白）
最终解决办法
使用nginx代理后端接口，配置如下
server {
listen 8888;
server_name localhost;
location / {
#try_files $uri $uri/ /index.html; # 解决页面刷新
proxy_pass http://200.200.200.200:200; #web在IIS的部署地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /api1{
rewrite ^/api1/(.*)$ /$1 break;
proxy_pass http://100.100.100.100:100;#api1的后端接口地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /api2{
rewrite ^/api2/(.*)$ /$1 break;
proxy_pass https://xxxx.xxxxx.com; #api2的后端接口地址
proxy_pass_header X-Accel-Buffering;
proxy_read_timeout 1800s;
proxy_set_header Origanization-Id qiancheng;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host xxxx.xxxxx.com;
#不加下面这些 在https 报403错误
proxy_ssl_server_name on;
proxy_ssl_name xxxx.xxxxx.com;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。