前后端分离nginx配置，同时解决跨域问题

背景

现在，web开发的前后端分离技术越来越火爆，由于最近的公司官网使用了前后端分离的方案，这里就来记录一下前后端分离的项目部署。这里我们使用的前端框架是Vue.js，后台使用Laravel7提供数据接口。

Nginx

nginx (engine x) 是一个高性能的HTTP和反向代理服务器,这里我们使用nginx来作为前端页面的静态服务器。

思路

前端部署

nginx作为静态服务器部署前端代码

后端部署

nginx配置不同端口的后台服务器部署接口代码

nginx反向代理

将发往nginx服务器的数据请求发送到后台端口

代码

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  tosim.top;

        location / {
                root html/build;
                try_files $uri /index.html;  # try_files：检查文件； $uri：监测的文件路径； /index.html：文件不存在重定向的新路径 
                index index.html; 
        }

        location /api/ {
            # 把 /api 路径下的请求转发给真正的后端服务器
            proxy_pass http://localhost:18080/;

            # 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:18080
            proxy_set_header Host $http_host;

            # 把cookie中的path部分从/api替换成/service
            proxy_cookie_path /api /;

            # 把cookie的path部分从localhost:18080替换成your.domain.name
            proxy_cookie_domain localhost:18080 tosim.top;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}