精华内容
下载资源
问答
  • nginx 前后端项目

    2020-12-25 15:02:34
    nginx部署前后端分离项目 保证系统安装nginx的前提条件下 将前端代码打包上传至服务器 后端代码打包上传至服务器,端口指定8080 编辑nginx的配置文件nginx.conf location / { root /home/admin/test/dist;...

    实现前后端分离,可以让前后端独立开发、独立部署、独立单测,双方通过JSON进行数据交互。
    对于前端开发人员来说,不用每次调试都需要启动运行环境;对于后端开发人员来说 ,也不用在需要往JSP页面注入数据。
    通过nginx来部署前端代码,可以帮助前端实现以下基本需求:

    • 保证系统安装nginx的前提条件下
    • 将前端代码打包上传至服务器

    • 后端代码打包上传至服务器,端口指定8080

    • 编辑nginx的配置文件nginx.conf

    location / {
        root   /home/admin/test/dist;#前端代码绝对路径
        index  index.html index.htm;
    }
    
    location /prod-api/{ #/prod-api为访问后端服务统一前缀
        proxy_pass http://127.0.0.1:8080/; #后端服务地址
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size    100m;
    }
    • 访问测试
    • nginx开启gzip压缩:网站开启gzip压缩,不仅能够节省带宽,也能够快速响应用户的访问
      #启用或禁用gzipping响应。
      gzip on;
      #设置用于压缩响应的缓冲区number和size。默认情况下,缓冲区大小等于一个内存页面。这是4K或8K,具体取决于平台。
      gzip_static on;
      #启用或禁用gzipping响应。
      gzip_buffers 4 16k;
      #设置level响应的gzip压缩。可接受的值范围为1到9。
      gzip_comp_level 5;
      #置将被gzip压缩的响应的最小长度。长度仅由“Content-Length”响应头字段确定。
      gzip_min_length 100;
      #匹配MIME类型进行压缩,text/html默认被压缩。        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
      log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
      				  '$status $body_bytes_sent "$http_referer" '
      				  '"$http_user_agent" "$http_x_forwarded_for"';
      #引入/usr/local/nginx/conf.d下面的所有配置文件
      include /usr/local/nginx/conf.d/*.conf;
      

       

    问题描述

    1. 403 Forbidden问题
      查看nginx日志: cat /var/log/nginx/error.log
      通过日志可以发现是没有权限,我们看下nginx的配置文件,可以看到箭头所指的位置是nginx用户,我们修改成root用户就可以啦!

     

    展开全文
  • Nginx前后端分离配置实践:本文主要记录前端通过Nginx与后端实现交互的配置。通过Nginx对外提供反向访问前端页面和后台接口,只需要在Nginx作简单的配置就可以对外发布应用服务(后端分模块开发,分别按照规范提供...

    Nginx前后端分离配置实践:本文主要记录前端通过Nginx与后端实现交互的配置。通过Nginx对外提供反向访问前端页面和后台接口,只需要在Nginx作简单的配置就可以对外发布应用服务(后端分模块开发,分别按照规范提供不同的业务接口-授权登录统一即可,实际上就是提供微服务)。同一个Nginx可以实现多个平台的服务配置,也就实现了微服务模式。

    Nginx配置

    主要关注 server(监控平台)的配置:

    worker_processes  1;
    events {
        worker_connections  128;
    }
    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
    
     
    	
      # 监控平台
      server {
            #配置HTTP服务器监听的端口号,这里默认写为8880
            listen       8881;
            server_name  localhost;
            location / {
                #替换下面的地址为您网页目录地址
                root   E:/work/cvnaviHtml/Monitor;
                index  index.html index.htm;
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
            #下面配置Tomcat或WAS服务器的地址,服务程序会自动进行代理转发
            location /monitoryt {
                proxy_pass   http://10.10.11.112:8081/cvnavi-monitoryt;
            }
        }
    }
    


    静态页面

    主要关注静态文件的路径:E:\work\cvnaviHtml\Monitor

    Nginx配置的时候可以找到index.html页面。

    后台接口

    后台接口与前端是分离的,可以从Nginx代理到Tomcat服务

    通过Nginx代理访问前端页面

    sosoapi管理Nginx反向代理的接口

    接口测试正常:


    展开全文
  • Nginx 前后端分离项目部署配置

    千次阅读 2019-07-16 13:07:07
    实现前后端分离,可以让前后端独立开发、独立部署、独立单测,双方通过JSON进行数据交互。 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境;对于后端开发人员来说 ,也不用在需要往页面...

    实现前后端分离,可以让前后端独立开发、独立部署、独立单测,双方通过JSON进行数据交互。

    对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境;对于后端开发人员来说 ,也不用在需要往页面注入数据。

    一:部署前端资源

    前端资源部署在nginx的html文件中;

     

    二:配置前端资源访问路径和默认访问路径

    root 是指定项目的根目录,适用与server和location。可以指定多个,如果locaiton没有指定,会往其外层的server或http中寻找继承。

    index 是指定网站初始页。该指令后面可以跟多个文件,用空格隔开;如果包括多个文件,Nginx会根据文件的枚举顺序来检查,直到查找的文件存在;文件可以是相对路径也可以是绝对路径,绝对路径需要放在最后;文件可以使用变量$来命。

    try_files  最核心的功能是可以替代rewrite;按顺序检查文件是否存在,返回第一个找到的文件。结尾的斜线表示为文件夹 -$uri/。如果所有的文件都找不到,会进行一个内部重定向到最后一个参数。

    rewrite 是实现URL重定向的重要指令,他根据regex(正则表达式)来匹配内容跳转到replacement,结尾是flag标记。

    location / {
        root  html/dist;	
        index  index.html;     
    }
    或者
    location / {
        root  html/dist;
        try_files $uri $uri/ @rewrite;
    }
    			
    location @rewrite{
        rewrite ^.*$ /index.html last;
    }

     

    三:部署后端资源

    后端资源部署在tomcat中;

     

    四:配置后端资源访问路径

    proxy_pass 配置的路径如果是以/结尾,如上面的配置v1,那么此时路径为相对路径,否则为绝对路径;

    proxy_connect_timeout 该指令设置与upstream server的连接超时时间,有必要记住,这个超时不能超过75秒;

    proxy_read_timeout  该指令设置与代理服务器的读超时时间。它决定了nginx会等待多长时间来获得请求的响应。这个时间不是获得整个response的时间,而是两次reading操作的时间。

    proxy_send_timeout  说明 这个指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间,而是在两次write操作期间。如果超时后,upstream没有收到新的数据,nginx会关闭连接;

    client_max_body_size   设置nginx的client_max_body_size解决nginx+java上传大文件的问题;500m表示最大上传500M,需要多大设置多大;

    proxy_set_header  用来重定义发往后端服务器的请求头;

    location /manage {
        proxy_pass http://127.0.0.1:8881;			
        proxy_connect_timeout	3;
        proxy_send_timeout		30;
        proxy_read_timeout		30;			
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        client_max_body_size	100m;		
    }

    五:Nginx完整配置;

     

    展开全文
  • 目前前后端交互,一般通过http协议、websocket协议来实现。HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW.Word Wide Web)服务器传输超文本到本地浏览器的传送协议。HTTP协议...

    目前前后端交互,一般通过http协议、websocket协议来实现。

    HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW.Word Wide Web)服务器传输超文本到本地浏览器的传送协议。

    HTTP协议包括客户端和服务端两个实体,客户端发送请求给服务端,服务端返回响应给客户端,在HTTP协议中数据称为资源,可以是html文档,图片,也可以是普通文本

    beb31900bcb749b59c8f15fdf7dcb07d.png

    资源是通过URL定位的,当客户端需要访问服务器资源时,首先需要知道资源的URL,比如打开一个网站,URL的组成部分如下图:

    5003d5abe756357712ae20bdbcb36a1e.png

    一、请求:

    GET /comments?postId=1 HTTP/1.1Host: 11.12.108.32:8090Connection: keep-aliveAccept: application/json, text/javascript, */*; q=0.01dataType: jsonUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36Referer: http://11.12.108.32:8090/views/index.htmlAccept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8id=1603348193982

    请求行:

    GET /comments?postId=1 HTTP/1.1

    请求头:

    Host: 11.12.108.32:8090Connection: keep-aliveAccept: application/json, text/javascript, */*; q=0.01dataType: jsonUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36Referer: http://11.12.108.32:8090/views/index.htmlAccept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8

    请求数据:

    postId=1

    fcee19c0690ded5e9ee886aa7269717d.png

    二、响应

    HTTP/1.1 200Server: nginx/1.10.3Date: Mon, 30 Nov 2020 10:55:29 GMTContent-Type: application/json;charset=UTF-8Transfer-Encoding: chunkedConnection: keep-alivevary: accept-encodingContent-Encoding: gzip{  "code": 1,  "message": "请求成功",  "data": {"name":"张三","age":"26"},}

    状态行:

    HTTP/1.1 200

    消息报头

    Server: nginx/1.10.3Date: Mon, 30 Nov 2020 10:55:29 GMTContent-Type: application/json;charset=UTF-8Transfer-Encoding: chunkedConnection: keep-alivevary: accept-encodingContent-Encoding: gzip

    响应消息

    {  "code": 1,  "message": "请求成功",  "data": {"postId":1,"name":"id labore","email":"Elise@gaid.com"},}

    1a7e6391731a645ae09acf31e18474de.png

    三、状态码:

    状态码说明
    1xx信息
    2xx成功
    3xx重定向
    4xx客户端错误
    5xx服务端错误

    a46fdc0149b333bb4c5b64d4fef62cd1.png

    常见的状态码

    状态码提示文案说明
    100Continue服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求
    200OK请求成功
    302Found所请求的页面已经临时转移至新的 url
    304Not Modified服务器告诉客户,原来缓冲的文档还可以继续使用
    400Bad Request服务器未能理解请求,一般来说就是发的请求有问题
    401Unauthorized请求未经授权
    403Forbidden服务器收到请求,但是拒绝提供服务
    404Not Found请求资源不存在
    500Internal Server Error服务器发生不可预期的错误
    502Bad Gateway网关错误
    503Server Unavailable服务器临时过载或宕机
    504Gateway Timeout网关超时

    四、请求方法:

    HTTP1.0及之前定义了三种请求方式:GET、POST和HEAD方法

    HTTP1.1新增了五种请求方法:OPTIONS、PUT、DELETE、TRACE和CONNECT方法

    • get一般用于获取资源,请求的参数会被拼接到url上

    • post 一般用于表单提交,上传,保存等

    • put向指定资源位置上传其最新内容

    • delete请求服务器删除Request-URL所标识的资源

    • options用来查询针对请求URI指定的资源支持

    • head与GET方法一样,只是不返回报文主体部分。用于确认URL的有效性以及资源更新的日期时间等

    • connect要求在与代理服务器通信时建立隧道,实现用隧道协议进行TCP通信

    • trace回显服务器收到的请求,主要用于测试或诊断

    1b594d6edb9ce4ecc1a72513d5317a21.png

    五、Content-Type请求的字符编码

    • 文本:text/plain、text/html、text/css、text/javascript

    • 图片:image/jpeg、image/png、image/gif、image/svg+xml

    • 音视频:audio/mp4、video/mp4

    • application/json

    • application/x-www-form-urlencoded

    • multipart/form-data

    • application/xml

    六、Accept:接收的报文类型

    类型候选和Content-Type一样,可以有多个值。多个值代表支持这些类型,并指定了得到类型的优先级。*/*表示任意类型

    jquery的dataType其实设置的就是这个属性

    Accept: application/json, text/plain, */*Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8
    展开全文
  • 1.同源问题解决 首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置 然后再终端下cmd nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过...2.关于ajax使用json进行前后端...
  • 分布式架构 前后端交互优化 上篇

    千次阅读 2019-04-25 12:56:53
    前后端交互优化 传统前后端交互结构如下: 如图所示前后端耦合一起,交互方式http+jsp+js,静态资源和业务代码统一存放同工程,同台服务器部署,服务器接收到浏览器的请求后,进行业务处理返回页面,页面渲染,...
  • 通过nginx实现前后端分离开发调试

    千次阅读 2019-08-23 11:18:34
    通过nginx实现前后端分离开发联调前后端分离开发联调的session问题如何使用nginx实现前后端分离开发调试功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成...
  • 前后端交互

    2017-02-19 16:05:00
    那么有哪些前后端交互的技能 服务端渲染 世界上大多数动态服务页面都是服务端的数据渲染,接口-> 前端赋值->模板渲染,都是在服务器完成。所以当我们查看源码的时候,我们可以看到完整的html代码,包括每个...
  • java nginx连接前后端

    2020-03-06 18:05:17
    使用nginx前后端连起来,基本分为3部: 在服务器新建两个文件夹,分别用来存放前端文件和后端jar包文件,并将文件放进去 修改配置文件,配置前端路径和后端路径跳转 访问连接 主要操作如下: Linux命令 : - ...
  • 微服务架构 前后端交互优化 下篇 针对上篇文章中提到 Web缓存优化、HTTP请求加速、多请求优化、页面渲染优化 本篇文章详细介绍 Web缓存优化 分析思考 什么是Web缓存,以及它有哪些类型 为何要使用Web缓存,它...
  • 现在几乎都是前后端分析的项目,在开发和线上一般都会使用nginx做代理来实现跨域和负债均衡。nginx安装前面已经讲过,现在写写如何配置,前端技术为vue。 server { listen 80; server_name zq.shidebin.com; ...
  • json进行前后端交互 jsp因为安全、跨平台、易维护而得到广泛应用,特别在企业级开发中很欢迎,但它的短处也特别让人诟病假设你的首页中有100张图片,以及一个单表的查询,此时,用户的看似一次http请求,其实并不是...
  • 前后端交互知识点

    2020-07-25 08:43:23
    标题1 前后端分离 出现前后端分离的原因:为了减轻服务器的压力,需要前后端分离,静态数据单独开发一个服务器,data数据也就是动态的数据分离出一个服务器,大的图片、文件也分离一个文件服务器。所以一共分为三个...
  • Angular Java ssm mysql nginx tomcat 前后端分离系统解决方案系统部署方案系统描述涉及技术1、核心技术2、技术点系统功能列表源码地址 系统部署方案 前端:angular8 ng-zorro-antd 后端:java spring springMVC ...
  • 使用Nginx部署前后端分离项目

    万次阅读 2018-09-09 18:03:13
    原文地址:...## 使用Nginx部署前后端分离项目 > Nginx(发音同 engine x)是一款轻量级的Web...
  • 简述前后端分离、nginx

    千次阅读 2018-12-05 21:15:44
    什么是前后端分离: 传统web应用开发中,大多数将浏览器当做前后端的分界线。浏览器中为用户进行页面展示的部分称为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码称为后端。 前后端分离: 前后...
  • nginx搭建前后端分离架构

    千次阅读 2017-08-14 18:05:09
    本人用的是vue-cli 自动构建vue+webpack 项目,这里不对webpack、nginx进行讲解。 本文主要解决前端开发环境搭建、测试环境搭建、生产环境搭建以及接口调试 一、需要工具 1.nginx(配置代理) 2.webpack-devserver...
  • 当然服务端渲染随着单页应用以及Restful接口的兴起,Ajax逐渐成为目前前后端交流最为频繁的方式。Ajax实际核心是XmlHttpRequest,我们通过对该对象的操作来进行异步的数据请求。 // 一般流程 var ...
  • nginx代理解决前后端跨域问题 本方案仅适用前后端分开部署的场景,前后端一起打包部署一般不存在跨域问题,如果开发过程中遇到跨域问题可参考我的另一篇博客Mac系统解除谷歌浏览器的跨域限制 打开配置文件 vim /usr/...
  • 前后端交互指南

    千次阅读 2016-08-24 08:41:40
    当然服务端渲染随着单页应用以及Restful接口的兴起,Ajax逐渐成为目前前后端交流最为频繁的方式。Ajax实际核心是 XmlHttpRequest ,我们通过对该对象的操作来进行异步的数据请求。 // ...
  • Nginx反向代理实现前后端分离 前后端分离就是让前后端专注于做自己的实现 自己写过简单的Web小案例,即便是这样,在前后端不分离的情况下,虽然基本语法都懂,但是实现起来还是相当繁琐,前端依赖后端传来的数据,...
  • Linux Nginx部署前后端分离的Java Web项目(Vue+Springboot) 系统(CentOS 8)环境准备工作: - Java JDK的安装和配置(Java 8) - Nginx的安装与配置 - MySQL的安装与配置、项目数据库的建立 测试找的一个项目demo地址...
  • 老项目前后端分离开发调试 在前后端没有完全分离部署的情况下,前端人员调试是很不方便的,有的时候本地后端相关配置不正确,会导致无法正常调试...今天就来一起学习一下怎么使用Nginx代理来进行前后端分离开发。 ...
  • 前后端交互之使用node.js与前端交互

    千次阅读 2020-03-09 16:16:52
    小程序和Vue Axios一直是从本地拿的假数据,很没有逼格,今天把前后端搭了起来。直接从服务器拿数据,虽然也是假数据 前端代码入戏 function sendAjax(url){ return new Promise(resolve => { let xhr =new...
  • 前后端分离架构实践,nginx配置

    千次阅读 2018-05-03 22:42:51
    实现前后端分离,可以让前后端独立开发、独立部署、独立单测,双方通过JSON进行数据交互。 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境;对于后端开发人员来说 ,也不用在需要往JSP...
  • 最近自己做了一个前后端分离项目,前端采用HBuilderX开发,后端采用IDEA开发,在本地开发也跨域,部署到云服务器也跨域,下面介绍两种解决方案。 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定...
  • gateway、nginx实现前后端动静分离

    千次阅读 2020-09-05 15:26:03
    直接转交给对应的服务器(在本项目中,该路径仅是数据交互的接口)————动 如果是满足域名,转交给对应的服务(给前端返回对应服务的index.html页面)———动 对应的服务器给前端浏览器返回index.html页面后,对...
  • 谷歌chrome8以上版本,前后端交互,cookie失效问题 一、新版本和旧版本谷歌区别 新版本对于cookie安全性,进行了更加精密的实现,80版本以前,前后端联调不会出现 cookie失效且跨域问题,当下载高版本,也是是80以上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,398
精华内容 2,959
关键字:

nginx前后端交互网站