nginx反向代理实现前后端分离&跨域问题
1、代理和跨域
1.1 正向代理
1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要:
a.用户IP报文的目的IP=代理服务器IP;
b.用户报文端口号=代理服务器监听端口号;
c.HTTP消息里的URL要提供服务器的链接;
2)代理服务器可以根据HTTP消息里的URL提供服务器的链接与服务器进行连接通信;
3)服务器返回网页;
4)代理服务器打包网页返回给用户;
1.2 反向代理
单个服务器的处理客户端(用户)请求能力是有限的,当用户的请求达到一定数量时,会造成服务器忙,此时可以使用多个服务器共同分担这些请求,这些服务器提供相同的服务,对于客户端而言,这些没有任何区别。
反向代理的实现:
1)一个分发用户请求的负载均衡设备,将用户请求分发到空闲的服务器上;
2)服务器返回自己的服务到负载均衡设备;
3)负载均衡将服务器的服务返回用户;
注意:客户端做服务器域名解析时,返回的IP是负载均衡的IP,而不是服务器的IP,当新增/移除服务器时,只需要修改负载均衡的服务器列表,而不会影响现有的服务。
1.3 两种代理
代理就是客户端请求交给服务器响应;反向代理就是代理服务器的响应返回给客户端;即正向代理是代理客户端,反向代理是代理服务器;
1.4 跨域
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
所谓同源是指,域名,协议,端口都相同。浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
2、nginx
2.1 nginx介绍
Nginx在前后端分离框架设计中,既可以作为前端的HTTP访问器,也可以通过简单配置实现负载均衡,还可以通过反向代理配置解决前后端分离的JavaScript跨域问题。
解决方案:Nginx服务器中,监听同一个域名和端口,不同路径转发到客户端和服务器,把不同端口和域名的限制通过反向代理,来解决跨域问题。
2.2 nginx安装和配置
2.2.1 编辑nginx.conf文件
进入/etc/nginx目录,编辑nginx.conf文件;将http 域内的整个server{}内容清除,找到include /etc/nginx/conf.d/*.conf;这行,如果没有,添加到http {} 的关闭括号前一行,删除或注释掉其他的 include *.conf行。
2.2.2 创建workload_server.conf
在nginx.conf中已经添加:include /etc/nginx/conf.d/*.conf;,所以先去/etc/nginx/conf.d目录,清空所有的内容,然后在该目录下创建workload_server.conf文件;
2.3 部署反向代理
upstream cas_server_http {
#ip_hash;
server ip1 weight=1;
#jvm_route $cookie_JSESSIONID|sessionid reverse;
}
upstream server_app1{
#ip_hash;
server ip2 weight=1;
}
upstream server_app2{
least_conn;
server ip3 weight=1;
}
server {
listen 8190 default_server;
listen [::]:8190 default_server;
server_name _;
location / {
root /var/www/html;
# root /usr/share/nginx/html;
index index.html index.htm index.nginx-debian.html;
try_files $uri $uri/ =404;
}
# apiApp
location /api1/ {
proxy_pass http://server_app1/api1/;
proxy_set_header Host $http_host;
}
# apiService
location /api2/ {
proxy_pass http://server_app2/api2/;
proxy_set_header Host $http_host;
}
# apiCas
location /cas/ {
proxy_pass http://cas_server_http/cas/;
proxy_set_header Host $host;
proxy_cookie_path /cas/ /;
proxy_pass_header Set-Cookie;
}
}
2.4 nginx操作
2.4.1 启动nginx
nginx
2.4.2 停止nginx
nginx -s stop
2.4.3 查看nginx进程
ps -ef | grep nginx
2.4.4 修改nginx.conf后重启nginx
nginx -s reload
3、问题
3.1 端口被占用
解决方案:
3.2 403 forbidden
分析:
当访问该地址的时候,nginx 会按照 index.html,index.htm ,index.php 的先后顺序在根目录中查找文件。如果这三个文件都不存在,那么nginx就会返回。
nginx反向代理实现前后端分离&跨域问题的更多相关文章
- nginx配置反向代理解决前后端分离跨域问题
摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...
- 使用nginx反向代理处理前后端跨域访问
本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...
- nginx-springboot-vue前后端分离跨域配置
nginx-springboot-vue前后端分离跨域配置 引言 接着上篇--简单的springboot-vue前后端分离登录Session拦截的demo,其中跨域是通过springboot后端全局设 ...
- 14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域
本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...
- Vue Nginx反向代理配置 解决生产环境跨域
Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...
- Django前后端分离跨域请求问题
一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...
- 关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。
项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个“浏览器预请求”不通过. 浏览器为什么会自动发送“预请求”?请看以面连接 https://b ...
- node与vue结合的前后端分离跨域问题
第一点:node作为服务端提供数据接口,vue使用axios访问接口, 安装axios npm install axios --save 安装完成后在main.js中增加一下配置: import ax ...
随机推荐
- MT【241】红蓝两色染色
用红蓝两色给$3*3$的格子染色,要求每行每列每种颜色都有,则不同的染色方法_____ 分析:按红色格子数分类,1)红色3或者6个有6种.2)红色4或者5个有45种.故一共有2*(6+45)=102种 ...
- BAI度 内部资料!Python_Threads多线程
基本介绍 runable运行sleeping等待dead销毁(run方法执行完成或执行时抛出异常) 类继承threading.Thread线程的状态 函数介绍 在__init__里调用threadin ...
- 【CF960G】Bandit Blues(第一类斯特林数,FFT)
[CF960G]Bandit Blues(第一类斯特林数,FFT) 题面 洛谷 CF 求前缀最大值有\(a\)个,后缀最大值有\(b\)个的长度为\(n\)的排列个数. 题解 完完全全就是[FJOI] ...
- hadoop文件配置
伪分布式配置: core-site.xml <configuration> <property> <name>fs.defaultFS</name> & ...
- bower介绍
一. bower是什么? bower是twitter推出的第三方依赖管理工具.其特点是对包结构没有强制规范,也因此bower本身并不提供一套构建工具,它充当的基本上是一个静态资源的共享平台.它可用于搜 ...
- (Arrays.sort() 或 map) Ignatius and the Princess IV hdu1029
Ignatius and the Princess IV 链接:http://acm.hdu.edu.cn/showproblem.php?pid=1029 借鉴链接:https://blog.csd ...
- Java 搜索引擎
1.Java 全文搜索引擎框架 Lucene 毫无疑问,Lucene是目前最受欢迎的Java全文搜索框架,准确地说,它是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎.Luc ...
- Shell标准输出、标准错误
shell中可能经常能看到:>/dev/null 2>&1 eg:sudo kill -9 ps -elf |grep -v grep|grep $1|awk '{print $4 ...
- nginx upstream的配置
upstream backend { server 13.4.2.14:8080 max_fails=2 fail_timeout=30s ; server 13.4.2.15:8080 max_fa ...
- Python基础【day01】:初始模块(五)
本节内容 1.标准库 1.sys 2.os 2.第三方库 1.for mac 2.for linux Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的P ...