这是我参与更文挑战的第2天，活动详情查看：更文挑战

业务场景

在前后端分离的开发场景中, 我们对于前端有两种发布生产环境的方式:

和后端一起继承打包
使用web服务器

在使用后者时, 会遇到请求跨域的问题

本文将详细说明如何使用Nginx作为web服务器的同时处理跨域问题

方案

使用Nginx作为web服务器

首先, 根据服务器的操作系统, 在官网下载对应的程序包

解压后的目录结构如下:

其中html(默认服务文件地址)与conf(配置文件目录)较为重要

在不修改配置文件的前提下, 我们将前端编译后的文件移动到html目录下, 运行nginx.exe, 一个简单的web服务就构建好了

web服务配置

先来看下最常用的配置文件内容, conf/nginx.conf:

http {
    server {
        listen 80;
        server_name  localhost;
        
        location / {
            root html;
            index index.html;
        }
    }
}
复制代码

说明几个重要的配置含义:

server: 一个server代表一个虚拟节点
server.listen: 监听端口
server.server_name: 域名, 例如locahost:80和www.baidu.com:80是完全不同的
location: 定位方式
location.root: 定位方式内容的根目录, 当值为相对路径时, 自动补齐nginx所在目录, 默认web路径是html的原因就在于上图的配置, 将/定位到了{nginx}/html中
location.index: 首页文件

如果我们想把/app/koala-ui/dist下的内容使用Nginx进行web服务发布, 可以这样配置:

http {
    server {
        listen 8000;
        server_name  localhost;
        
        location / {
            root /app/koala-ui/dist;
            index index.html;
        }
    }
}
复制代码

对于使用变量/路径重写等更加负载的配置, 可以参考官方文档

解决跨域

我们的koala-ui已可以使用localhost:8000进行访问, 但后台接口的地址是localhost:9999/api

继续修改conf/nginx.conf, 增加一个location对接口进行代理:

http {
    server {
        listen 8000;
        server_name  localhost;
        
        location /api {
            proxy_pass  http://127.0.0.1:9999;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        
        location / {
            root /app/koala-ui/dist;
            index index.html;
        }
    }
}
复制代码

有几个内容要着重说明下:

proxy_pass的值, http://127.0.0.1:9999和http://127.0.0.1:9999/是有区别的, 代理/api/test时, 二者对应的地址分别是http://127.0.0.1:9999/api/test和http://127.0.0.1:9999/test
proxy_set_header X-Real-IP $remote_addr和proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for设置是必要的, 目的是为了服务端可以获取用户真实的IP
location /{...}一定要放在最后