精华内容
下载资源
问答
  • 笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同。例如前端页面为:http://127.0.0.1/, 后端api根路径为http://127.0.0.1:8888,这样就导致跨域问题,前端设置的request header...

    笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同。例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:8888 ,这样就导致跨域问题,前端设置的request header或者cookies后端接收不到,这是很蛋疼的问题。用nginx配置端口转发完美解决。首先在本机安装nginx,前端配置端口号为80

    $ sudo nginx
    $ vim /usr/local/etc/nginx/nginx.conf

    接着配置后端api接口,设置路径为 /api/

    保存重启nginx

    $ sudo nginx reload

    在浏览器中访问 http://127.0.0.1 和 http://127.0.0.1/api/ 成功!

    展开全文
  • 前后端分离跨域问题

    2021-01-07 04:31:24
    客户端和服务端不同IP不同端口都算跨域。 springboot解决跨域有cros,配置就是那几项。 如果把服务端程序部署在nginx上,在nginx 也可以解决,服务端和nginx只用写一个即可, server { listen 3002; server_name ...
  • 浏览器访问网页已经不能通过一个页面实现不同端口号的跳转(例如多个不同前端项目的合并登录页),所以目前就可以通过给网页访问链接增加不同的url前缀,来让Nginx去实现同一端口下访问不同的前后端项目。...

    Nginx实现通过不同的url前缀访问不同的前后端项目

    近期谷歌浏览器更新后,浏览器访问网页已经不能通过一个页面实现不同端口号的跳转(例如多个不同前端项目的合并登录页),所以目前就可以通过给网页访问链接增加不同的url前缀,来让Nginx去实现同一端口下访问不同的前后端项目。具体配置如下:
    (我这里是前端两个项目各自对应后端的两个服务)

    	server {
    		#这里默认监听80端口,可根据项目需要自行设置需要监听的端口号
            listen       80;
            server_name  此处填写项目发布的域名或者ip地址;
    
            location / {
    			root   此处填写前端项目文件路径(默认访问的前端项目一的路径);
                index  index.html index.htm;
            }
    		
    		#这里因为每个server只能有一个root 所以在根目录默认有root之后,可以通过alias来配置其他文件路径
    		#ex: http://www.xxx.com:xxx/unst/#/xxx,将/unst这个前置在页面跳转时加入url的#号之前即可
            location /unst {
    			alias  此处填写前端项目文件路径(前端项目二的路径);
                index  index.html index.htm;
            }
    		
    		#前端项目一对应的后端服务一的跳转配置
    		location /st/ {
    			proxy_redirect  off;
                proxy_set_header  Host  $host; 
                proxy_set_header  X-Real-IP  $remote_addr;
                proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    			proxy_pass   http://127.0.0.1:8089;
            }
            
      		#前端项目二对应的后端服务二的跳转配置
            location /un/ {	
    			proxy_pass   http://127.0.0.1:8091;
            }
    		
        }
    
    展开全文
  • 前后端分离_权限认证设计_原理篇

    千次阅读 2019-01-01 13:31:29
    前后端分离_权限认证设计_原理篇 前后端分离与传统的区别: 其实前后端分离与传统框架的区别就是一个是自动化状态管理,一个是自己管理,让我们来先看下传统的状态管理. 传统的状态管理: 通过上面的图,应该可以...

    前后端分离_权限认证设计_原理篇

    前后端分离与传统的区别:

    其实前后端分离与传统框架的区别就是一个是自动化状态管理,一个是自己管理,让我们来先看下传统的状态管理.

    传统的状态管理:

    传统的状态管理
    通过上面的图,应该可以清晰的表示出传统的web应用状态的管理过程,都是围绕一个核心问题展开的:

    服务器怎么知道我是哪个客户端,有没有登录过.

    由此问题开始引申出如下问题:

    1. 服务端需要生成一个唯一身份认证.
    2. 服务端需要为每个唯一身份认证维护一个登陆状态.
    3. 客户端需要保存服务端产生并给出的唯一身份认证.
    4. 客户端每次请求需要带上服务端给的唯一身份认证.

    那传统的状态管理都是如何解决上述问题的呢?
    1,服务端自动生成:tomcat的ManagerBase类提供创建sessionid的方法:随机数+时间+jvmid.
    2,根据sessionid为Key创建一个map保存登录状态,如果登录通过就保存为true,失败就为fasle.
    3,客户端解析到sessionid后保存在本地的cookies文件里.
    4,客户端每次请求查询相应的cookies把sessionid添加到请求头中进行身份认证.

    看完了上面的讲解,现在明白了么?回到我们最初的问题:

    传统的状态管理和前后端分离的状态管理的区别是什么?

    现在可以回答这个问题:最大区别就是是否自动化,传统的web应用服务,上面的这一切都是自动化的,你不需要做什么,tomcat服务器和浏览器都帮你做好了,你不需要单独的写代码,实现什么,浏览器和服务器都自动进行着上面的工作,那我们可能要问,为什么前后端分离后要自己生成呢? 浏览器服务器不都给我干了么,答案很简单,因为有一个非常重要的问题就是,你要前后端分离就不可避免的要面对一个问题: 跨域!
    一旦当你涉及到跨域访问的时候浏览器就不再自动给你干这个活了.
    但是同样的如果你的应用只是前后端分离开发,但是部署同域!那就与普通的登录没有区别

    延伸一下(为什么跨域就不自动帮你干活了):

    举个例子:
    你去银行柜台办理转账或者取款业务,营业员除了要求你有身份证外还需要验证一下头像和你的长相,判断你是否是本人,如果不是本人是不给你办理转账的,因为这样就可以避免有人捡到或者盗用你的身份证去把你的钱偷走,但是实际你肯定也是不希望他只那你的身份证就能代替你去取款的.那体现在浏览器是怎么解决这个问题的呢?

    你每次用浏览器访问请求的时候,浏览器也会进行一个同源认证,这个同源认证就是为了保证你的身份证和你本人是同一个人的,同源认证需要三者一致:

    1. 协议相同
    2. 域名相同
    3. 端口相同

    只有上面三者一致,浏览器才会自动取出相应的sessionid放入你的请求头中,以便你的请求可以在服务端得到认证,不一致就不会自动进行,那既然我们要实现跨域,域名和端口就不会保持一致,那怎么办? 那就只能我们自己实现或者改造这个过程了.

    跨域方案(前后端分离方案)

    方案一:(改动最小,不易扩展)

    1. 服务器照旧,浏览器端不再使用cookie进行sessionid的保存(实际最开始那几年好多应用都是这么干的,因为浏览器也是可以禁用cookie的).
    2. 浏览器保存sessionid,并在每次请求的时候取出请求到的sessionid.
      a. from表单保存,提交请求的时候自动请求.
      b.保存在LocalStorage,提交请求的时候取出来加到请求里.

    方案二:(上下都改,易于扩展)

    1. 服务器禁用session,采用JWT将用户信息加密到token里,生成唯一值的token令牌.
    2. 服务器接到请求的时候如果登录成功,就把令牌放到response里面跟随其他信息一起返回给客户端.
    3. 客户端接收到返回的请求后,把token令牌的唯一值保存在LocalStorage中.
    4. 客户端每次发请求之前去LocalStorage中把令牌取出,使用带着令牌的请求到服务端进行状态认证.
    接下来我将采用第二种方案,结合Spring boot+Spring security+jwt实现一套通用的权限系统,喜欢的可以了解关注一下.

    总结:

    简单的总结一下,因为有好多人只是听说前后端分离很火,然后就百度,很多时候不明就里的就使用了jwt等令牌框架技术了,其实不使用也是可以的,就是简单的在web里拦截一下sessionid,每次请求带上sessionid就这么简单就可以解决问题了,解决问题简单实用成本最低最好,单纯的追求"火","高端"不能说没有意义,只不过程序员应该寻求把时间放在更有价值的地方中去.在我的观念里,技术没有好坏之分,没有高低之分,用最简单,最合适的技术,用最快的速度去解决现有问题的技术才是最牛逼的技术!

    展开全文
  • # } #} #实现前后端转发的代码配置如下,要于前后端对应端口和路劲 server { listen 9001; server_name localhost; location ~ /eduService/{ proxy_pass http://localhost:8001; } location ~ /...

    下载nginx

    1.windows下的nginx功能没有Linux下的强大,但不熟悉Linux系统的可下载Windows下nginx,功能足够
    2.下载后,打开文件,里面有nginx.exe可点击启动,但推荐使用cmd启动如下:
    Microsoft Windows [版本 10.0.18363.959]
    © 2019 Microsoft Corporation。保留所有权利。
    D:\Nginx\nginx-1.12.2>nginx.exe

    好处是:nginx可以同时开启好多个,但使用exe启动不明显启动了多少个,关闭时还要打开任务管理器一个一个结束,使用命令启动有助于观察和关闭,关闭时不是直接关闭控制终端,而是使用命令才能结束进程,命令如下:
    nginx.exe -s stop
    3.确定下载启动都成功后即可操作前后端连接转发

    前端配置端口(VScode)

    在基于vue-admin等框架开发是在config文件加下找到dev.env.js修改

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      //BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
      //nginx中实现多端口转发
      BASE_API:'"http://localhost:9001"',
    })
    
    

    后端controller中的请求路径要求忽略字母大小写,要求路径无相同

    @RestController
    @RequestMapping("/eduService")
    @CrossOrigin//解决跨域请求
    public class EduTeacherController {
    //该模块访问端口为8001
    
    
    @RestController
    @CrossOrigin
    @RequestMapping("/eduOss")
    @Api(tags = "阿里云OSS文件(头像)上传")
    public class OssController {
    //该模块访问端口为8002
    

    修改nginx配置文件nginx.conf

    
    #user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server {
            listen       81;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   html;
                index  index.html index.htm;
            }
    
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
    
            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ {
            #    proxy_pass   http://127.0.0.1;
            #}
    
            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ {
            #    root           html;
            #    fastcgi_pass   127.0.0.1:9000;
            #    fastcgi_index  index.php;
            #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            #    include        fastcgi_params;
            #}
    
            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht {
            #    deny  all;
            #}
        }
    
    
        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        #server {
        #    listen       8000;
        #    listen       somename:8080;
        #    server_name  somename  alias  another.alias;
    
        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    
        # HTTPS server
        #
        #server {
        #    listen       443 ssl;
        #    server_name  localhost;
    
        #    ssl_certificate      cert.pem;
        #    ssl_certificate_key  cert.key;
    
        #    ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;
    
        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;
    
        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
        #实现前后端转发的代码配置如下,要于前后端对应端口和路劲
    	server {
    		listen         9001;
    		server_name    localhost;
    		location ~ /eduService/{
    			proxy_pass http://localhost:8001;
    		}
    		location ~ /eduOss/{
    			proxy_pass http://localhost:8002;
    		}
    		
    		
    	}
    
    }
    
    展开全文
  • 目前主流的开发模式,就两种:前后端分离 和 前后端不分离 前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的...
  • 前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。 这种应用模式比较适合纯网页应用,但是当后端...
  • 前言--浅谈前后端在我的脑海中一提到前端和后端,基本上第一个出现的区别点就是:后端是跟数据库跟服务器打交道的,前端是跟浏览器打交道的。似乎没有什么问题,大家都这么认为的。当然这没有什么错,我们一直以来都...
  • 前后端分离项目的服务器部署

    千次阅读 2021-02-23 09:42:19
    本文讲的是前后端分离的项目的服务器部署,这里就以我的个人网站为例子。我的个人网站前端是react,后端是nodejs,数据库是mongodb。 为了把项目部署上线,首先我们需要确保这个项目已经在本地跑通了,所谓跑通就是...
  • 我又又回来了,本次快速建立一个spring boot+react前后端的hello world的demo!!! 1.前后端分离 前后端分离(解耦)的核心思想:前端HTML页面通过Ajax调用后端的RestFul API并使用JSON数据进行交互。 1.1 传统的...
  • Nginx+SpringCloud完成一个前后端分离,并且前后端的一个负载均衡 大致的流程就如上图的一般 worker_processes 1; #指令控制工作进程数 官方说一般情况下1足够,不到必要没啥好改的 events { worker_connections ...
  • 最近自己做了一个前后端分离项目,前端采用HBuilderX开发,后端采用IDEA开发,在本地开发也...所谓同源就是两个页面或者前后端的两个地址具有相同的协议(protocol),主机(host)和端口号(port)。首先在前端接口请
  • 前后端分离搭建的简单实现

    千次阅读 2019-10-21 20:23:06
    搭建前后端分离 为什么要前后端分离 前后端分离是目前非常流行的一种开发模式,他的项目分工更加明确: 后段:负责处理,存储数据 前段:负责显示数据 前段和后端开发人员通过接口进行数据交换 好处: 1.一套后端...
  • 前后端分离项目的session问题

    千次阅读 多人点赞 2019-08-01 11:13:52
    我们了解了浏览器的同源策略,接下来就看一看同域下的前后端分离,首先看服务端能不能设置Cookie,具体代码如下: 后端代码: @RequestMapping("setCookie") public String setCookie(HttpServletResponse ...
  • CAS单点登录(十三)——客户端前后端分离接入

    万次阅读 多人点赞 2019-07-07 09:02:14
    最近在工作上遇到CAS前后端分离接入,后端是使用的GO,前端则是Ant Design,通过Restful Api进行数据交互,最后是同域下完成接入,始终感觉不理想,打算仔细研究一下前后端分离接入CAS方案,并进行总结如下。...
  • 前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如...
  • 前后端分离架构:Web实现前后端分离,前后端解耦 一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦。并且前后端分离会为以后的大型分布式架构、...
  • 前后端分离开发具体实现

    万次阅读 多人点赞 2018-11-29 15:02:40
    前后端分离开发具体实现 1 Visual Studio Code开发工具的安装 双击安装,即可成功 3.1.2 Visual Studio Code开发工具的配置 3.1.2.1、设置中文环境 设置中文环境 安装完毕后,vscode全部都是英文版本的,需要把...
  • 动静分离之前项目静态页面引入和相关js包使用 1、bootstap和jquery介绍和学习资料 bootstapt:https://v3.bootcss.com/getting-started/ jquery:http://www.w3school.com.cn/jquery/index.asp 2、知识拓展...
  • 前后端分离架构:Web实现前后端分离,前后端解耦

    万次阅读 多人点赞 2018-04-16 13:55:40
    一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种...
  • 前后端分离项目安全漏洞修复总结

    千次阅读 2020-06-01 11:05:36
    前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能...
  • 前后端分离项目初体验——手把手教程+实例Demo

    万次阅读 多人点赞 2019-02-27 22:57:58
    Web开发发展至今,前后端分离已经成为一种大趋势。今天我就以JavaWeb为示例来讲解一下前后端分离项目的构建、运行与开发。 示例项目的技术: 前端–Vue.js 后端–SpringBoot2.0 + SSM框架 使用Nginx解决请求转接与...
  • 前后端分离项目之python后端部署前的操作

    万次阅读 热门讨论 2018-07-15 15:29:52
    前后端分离项目后端部署 前端:VUE+webpack打包+vue-router路由 后端:python+django 前端项目结构 前端项目操作目录 前端打包 npm run build 生成打包后目录dist文件夹 直接点进去...
  • Web实现前后端分离,前后端解耦

    千次阅读 2019-08-15 20:31:00
    前后端分离的话,则可以很好的解决前后端分工不均的问题,将更多的交互逻辑分配给前端来处理,而后端则可以专注于其本职工作,比如提供API接口,进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来...
  • 如题,在把vue打的包部署到nginx上后,...没有任何报错,但是一点击index页面的登录按钮调用后台接口时,我看了下浏览器检查里面的请求地址,是访问前端的IP+端口/后端的Ip+端口,不知道如何解决,请各位大佬帮帮我!!! ...
  • 2、前后端分离项目中的跨域问题 3、方法一:SpringBoot后端进行处理 4、方法二:在Vue前端进行处理 5、总结 1、什么是跨域 请求同域资源: 在域名 (或 ip 地址)相同端口相同下的请求资源,可以看做是同...
  • 【开发篇】10分钟快速上手spring boot+react登录前后端分离 之前的预备知识: 10分钟快速上手git与github 10分钟快速上手springboot 10分钟快速springboot+react前后端分离 10分钟快速上手springboot+mybatis增删...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,238
精华内容 8,495
关键字:

前后端相同端口