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

简介: 前后端分离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;
        }
    }
}
目录
相关文章
|
1天前
|
应用服务中间件 nginx
Nginx 配置,自定义日志格式 log_format
Nginx 配置,自定义日志格式 log_format
10 0
|
5天前
|
Java Serverless 应用服务中间件
Serverless 应用引擎产品使用合集之Web函数启动的Spring Boot项目可以通过什么方式配置Nginx
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
11天前
|
应用服务中间件 Linux nginx
|
11天前
|
网络协议 安全 应用服务中间件
阿里云申请免费ssl证书并配置nginx
阿里云申请免费ssl证书并配置nginx
|
11天前
|
网络协议 安全 应用服务中间件
阿里云 网站https设置 sll申请与nginx跳转配置
阿里云 网站https设置 sll申请与nginx跳转配置
|
26天前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
|
26天前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
|
27天前
|
负载均衡 安全 应用服务中间件
nginx配置ssl和反向代理的配置代码
【5月更文挑战第2天】nginx配置ssl和反向代理的配置代码
55 3
|
30天前
|
负载均衡 应用服务中间件 nginx
解决nginx配置负载均衡时invalid host in upstream报错
在Windows环境下,配置Nginx 1.11.5进行负载均衡时遇到问题,服务无法启动。错误日志显示“invalid host in upstream”。检查发现上游服务器列表中,192.168.29.128的主机地址无效。负载均衡配置中,两个服务器地址前误加了"http://"。修正方法是删除上游服务器列表和proxy_pass中的"http://"。问题解决后,Nginx服务应能正常启动。
72 4
解决nginx配置负载均衡时invalid host in upstream报错
|
1月前
|
应用服务中间件 nginx
nginx配置集群轮训策略
nginx配置集群轮训策略
638 0