Nginx代理后端API（处理前端跨域问题）

背景

现代前端开发往往采用前后端分离的方式并行开发，但是在部署的时候会发现前端会报跨域的错误。

原因

浏览器采用同源策略来保护我们的隐私及安全，禁用了跨域请求的能力。

解决办法

1. 后端开启跨域（有选这种的🐴 🤪）
2. 使用nginx代理后端接口（常规方式）

实现方式

希望能通过nginx将浏览器的请求代理到后端的API接口实现跨域请求的目的，例如：当浏览器请求 /api/users 的时候，通过nginx将请求转发到 http://192.168.0.1:8080/users 已实现我们目的。

以下是nginx极简的配置：

{
   server {
    listen 3000;
    server_name localhost;

    location / {
        root /var/www/mainApp; ###配置应用的文件夹
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    ###代理后端API的配置
    location /api/ {
        proxy_pass http://192.168.0.1:8080/;
    }
}

nginx配置完成后执行nginx -s reload重载配置后即可顺利访问。

补充说明：前文中的请求/api/users代表spa项目中后端API的全路径访问URL，一般项目中会有一个base_url（当然也有可能是其它的名称）的全局API的基础路径，如果不使用代理base_url应为：http://192.168.0.1:8080，使用代理时base_url应为：/api，通俗的讲就是我们在spa项目中使用/api替换了http://192.168.0.1:8080的写法。