nginx 反向代理解决前后端分离跨域问题

# cd到 /conf 文件夹

cd /usr/local/nginx/conf

# 使用 vim 编辑 nginx.conf 文件

vim nginx.conf

增加如下代码

location /api {
            proxy_pass http://接口服务地址:端口号/api/;
        }

完整代码

http {
    ......
         
    server {
        listen       80;
        server_name  localhost;
      
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
    
        location / {
            root   html; 
            index  index.html index.htm;
        }
    
        location /api/pickles {
            proxy_pass http://接口服务地址:端口号/api/;
        }

        ......
    }

    ......
}

# 重启 nginx

进入 /sbin 文件夹

cd /usr/local/nginx/sbin

重启 nginx

./nginx -s reload

# axios 设置请求url

axios.defaults.baseURL = '/api';  // 生产环境

参考博客：

1. 利用nginx部署纯前端项目并通过反向代理跨域请求后台服务器（前后台完全分离项目部署及跨域请求后台问题）
2. Nginx完美解决前后端分离端口号不同导致的跨域问题