关于nginx实现前后端分离系统的配置问题

Question

问题描述

在前后端分离的系统中，前端和后端项目都已经部署好了，可是通过前端项目并不能够访问到后端项目所绑定的数据库，无法获取数据库中的内容。

问题出现的环境背景及自己尝试过哪些方法

在nginx中的root指向本地vue项目生成的dist文件，然后再location中将请求代理到tomcat的服务器端口，

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

server {
  listen 80;
  server_name  localhost;
  proxy_set_header X-Real-IP $remote_addr;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept;
client_max_body_size 30M;
  limit_rate 100k;

  gzip  on;
  gzip_min_length 1k;
  gzip_buffers 16 64k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types application/json text/plain text/css;
  gzip_vary on;

  location ~* \.(txt|pem|p12|url)$ {
    deny all;
  }
   location / {
    default_type application/json;
     proxy_pass http://localhost:8888;
  }
}

我tomcat的端口是8888，而root的路径放在了http下

你期待的结果是什么？实际看到的错误信息又是什么？

试了很多方法还是不能够解决，求大神指点，我这样是哪里出现了问题呢？

Answer 1

前后端分离指的是前端一台单独的web服务器，后端一台单独的web服务器，可以是不同的物理服务器，也可以在同一台物理服务器上，但是配置两个不同的nginx主机，或者甚至在同一个nginx主机上，但是至少要有不同的路径进行区隔。比如说https://www.example.com/frontend是前端的服务路径，https://www.example.com/backend是后端的服务路径，如果都放在frontend里也可以，但至少要让nginx知道它需要把哪些东西反向代理给tomcat，同一个路径同一个文件，既让它走前端，又让它反向代理给tomcat，这是不可能的。

举例来说：

server {
    listen 80;
    server_name www.example.com;

    root /Users/zhangjing/Projects/example.com/dist;

    location / {
        index index.html;
    }

    location /backend/ {
        proxy_pass http://127.0.0.1:8080;
    }
}

在这里，/被指向了dist目录，提供前端服务，/backend被反向代理到本机的8080端口，提供后端服务。只有这样做才能正确地分离开前后端，否则把前后端混在一起是没有办法提供服务的。

Answer 2

为什么要在nginx这设置允许跨域？ 允许那个域可以跨域请求，具体的application不知道？轮到nginx做这个？