前端配置Nginx解决跨域问题

2,310 阅读2分钟

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,代表监听的端口
  4. 附上location定位规则

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