vue 之 nginx原理(webpack环境下配置)

正向代理隐藏真实客户端，反向代理隐藏真实服务端

 

浏览器:有一个安全策略. 浏览器请求的协议端口域名,三者必须一样,只要一项不一致,就会跨域

浏览器有安全策略,有跨域问题,但是服务器之间没有跨域问题

跨域有以下几个办法:

1.jsonp (只能get请求,js的src属性)

2.cors(后端)

3.nginx(前端配置)

 

步骤:

1.浏览器去请求代理服务器

2.代理服务器发送请求去找服务器

3.服务器将数据返回给代码服务器

4.代理服务器将数据交给浏览器

 

 

代理服务器的开发阶段和上线阶段

开发阶段:配置反向代理服务器解决跨域问题,有webpack环境 (关键字:开发阶段  反向代理 配置)

上线阶段:项目开发完毕后,生成dist文件,没有了webpack环境,所以需要配置nginx代理或者node服务代理(服务器上,其实前后配置差不多,只是语法不一样)

 

如何进行配置

参考文档 https://cli.vuejs.org/zh/config/#devserver-proxy  vue的代理配置

https://webpack.js.org/configuration/dev-server/#devserverproxy (也可以看)

注意点:在vue.config.js文件中配置

第一步: 在vue.config.js的devserver节点中配置

 target :代理的目标服务器地址,这个路径是我代理到服务器,即你要请求的第三方接口

 

 

  第二步:配置环境变量

这是开发阶段:可以配置为本地,也可以将网站的协议和域名放这里

 

 这是上线阶段:

 

 认知:这个配置环境环境不需要管理,非打包阶段,会自动读取为开发阶段,打包后,自动读取为上线阶段