配置Nginx反向代理解决跨域

   日期:2020-05-22     浏览:136    评论:0    
核心提示:1.了解正向代理和反向代理1.1 正向代理代理是在服务器和客户端之间假设的一层服务器,代理将接收客户端的请求并将它转发给服务器,然后将服务端的响应转发给客户端。正向代理是为我们服务的,即为客户端服务的,客户端可以根据正向代理访问到它本身无法访问到的服务器资源。正向代理对我们是透明的,对服务端是非透明的,即服务端并不知道自己收到的是来自代理的访问还是来自真实客户端的访问。1.2 反向代理反向代理是为服务端服务的,反向代理可以帮助服务器接收来自客户端的请求,帮助服务器做请求转发,负载均衡等。反运维

文章目录

      • 1.了解正向代理和反向代理
        • 1.1 正向代理
        • 1.2 反向代理
      • 2. 安装Nginx
      • 3. 配置Nginx
        • 3.1 打开nginx-1.18.0\conf\nginx.conf进行配置
        • 3.2 优化配置代码
        • 3.3 使用环境
        • 3.4 开始配置
        • 3.5 修改axios的baseURL
        • 3.6 大功告成~
        • 3.7 问题
      • 参考文章:

1.了解正向代理和反向代理

1.1 正向代理

代理是在服务器和客户端之间假设的一层服务器,代理将接收客户端的请求并将它转发给服务器,然后将服务端的响应转发给客户端。

正向代理是为我们服务的,即为客户端服务的,客户端可以根据正向代理访问到它本身无法访问到的服务器资源。

正向代理对我们是透明的,对服务端是非透明的,即服务端并不知道自己收到的是来自代理的访问还是来自真实客户端的访问。

1.2 反向代理

反向代理是为服务端服务的,反向代理可以帮助服务器接收来自客户端的请求,帮助服务器做请求转发,负载均衡等。

反向代理对服务端是透明的,对我们是非透明的,即我们并不知道自己访问的是代理服务器,而服务器知道反向代理在为他服务。

2. 安装Nginx

Nginx官网下载稳定版本,解压即可食用,双击nginx.exe即可

浏览器打开http://localhost:80,如出现

则安装成功

3. 配置Nginx

3.1 打开nginx-1.18.0\conf\nginx.conf进行配置

3.2 优化配置代码

  1. 第一个location中的root和index字段可以删掉
  2. 红框中的error_page和它下面的location也可以删掉

删除上述两项后的代码如下,

3.3 使用环境

我的前端服务地址:http://localhost:8082

后端egg服务地址:http://127.0.0.1:7001

两个服务都已经启动,现在请求会发生跨域

之前有用proxy解决跨域,proxy解决跨域

3.4 开始配置

在nginx-1.18.0\conf\nginx.conf文件中location里面加上两个字段:

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        // 这里加字段
        location / {
            proxy_pass  http://127.0.0.1:7001;  // 后端服务地址
            add_header  Access-Control-Allow-Origin *;
        }
    }
}
  1. proxy_pass,代表要代理的服务器端口
  2. add_header,添加 http 响应头,不加会报错,详细解释
  3. listen,代表监听的端口

3.5 修改axios的baseURL

这时候你的baseURL应该是http://localhost:80,记得重启nginx,在nginx.exe文件目录打开cmd命令行输入

nginx -s reload

3.6 大功告成~

如有不当,还请老哥指出

3.7 问题

2020/5/22 测出问题,无法携带token进行跨域 ×

参考文章:

面试题:nginx有配置过吗?反向代理知道吗?

nginx在应用程序中的作用

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服