米鼠商城

多快好省,买软件就上米鼠网

最新项目

人才服务

靠谱的IT人才垂直招聘平台

配置Nginx反向代理解决跨域

  • xx
  • 8
  • 2020-05-23 08:16

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在应用程序中的作用



这里给大家推荐一个在线软件复杂项交易平台:米鼠网 https://www.misuland.com

米鼠网自成立以来一直专注于从事软件项目人才招聘软件商城等,始终秉承“专业的服务,易用的产品”的经营理念,以“提供高品质的服务、满足客户的需求、携手共创双赢”为企业目标,为中国境内企业提供国际化、专业化、个性化、的软件项目解决方案,我司拥有一流的项目经理团队,具备过硬的软件项目设计和实施能力,为全国不同行业客户提供优质的产品和服务,得到了客户的广泛赞誉。

猜你喜欢

评论留言