前端开发数据传输跨域问题解决方案之:nginx反向代理

nginx 反向代理解决跨域

  1. 坑坑坑 nginx >>html文件夹下index.html 要删除,否则自定义代理index 不生效

反向代理原理

  1. 定义:服务器根据客户端的请求,从其关联的一组或多组后端服务器(如web服务器)上获取资源返给客户端,客户端只接收代理服务器返回的数据
  2. 特点:服务器端的代理,客户端只能获得代理服务器的ip地址,但不知道数据的最终来源(代理服务器背后的服务器集群)的存在
  3. 与正向代理的不同:正向代理是客户端的代理,服务器只获取到代理客户端的ip地址,不能获取到客户端的地址。反向代理是很多客户端借由代理服务器获取数据,正向代理是客户端可以通过代理客户端访问多个服务器。

前端跨域示例

本地项目 以 `E:\FEFrame\test.html;` 静态形式启动的模式
server {
       listen       80;
       server_name  localhost;

      location / {
          root   E:/FEFrame/test.html; # 目标项目所在本地目录
          index  test.html; # 目标项目首页
      }

      location /api/ {
            proxy_pass  http://192.168.1.247:8080/; # 需要转到的服务器地址
      }
}

注意
  1. 静态形式启动的模式,不要直接 file:///E:/FEFrame/womo/vue-webpack-pro/test.html的方式在浏览器启动,会不生效
  2. 正确启动项目方式:浏览器地址栏输入 http://localhost 进行启动已被代理的项目
上一篇
下一篇