首页 技术 正文
技术 2022年11月17日
0 收藏 489 点赞 4,581 浏览 2169 个字

本文主要解决:使用nginx反向代理处理前后端跨域访问的问题

1.何为跨域访问?

以下类型为跨域访问

1)不同域名间访问

www.zuiyoujie.com和www.baidu.com

2)同域名不同端口

www.zuiyoujie.com和www.zuiyoujie.com:8080

3)同于名不同协议

http和https

4)域名和该域名自己的IP

www.zuiyoujie.com和自己解析的IP:192.168.1.1

5)二级域名相同,三级级域名不同

aaa.zuiyoujie.com和ttt.zuiyoujie.com
www.zuiyoujie.com和zuiyoujie.com等

以下类型为本域访问:

1)同一域名不同的子路径

www.zuiyoujie.com/a.html和www.zuiyoujie.com/b.html

2.跨域的常见解决方法(摘录)

https://www.cnblogs.com/gabrielchen/p/5066120.html

目前来讲没有不依靠服务器端来跨域请求资源的技术

1.jsonp 需要目标服务器配合一个callback函数。
2.window.name+iframe 需要目标服务器响应window.name。
3.window.location.hash+iframe 同样需要目标服务器作处理。
4.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage,主要侧重于前端通讯。
5.CORS 需要服务器设置header :Access-Control-Allow-Origin。
6.nginx反向代理,可以找技术人员帮忙处理

3.跨域访问实例

报错如下:

Failed to load http://192.168.1.137:8081/service/getStation?Line=1: No 'Access-Control-Allow-Origin'header is present on the requested resource.
Origin 'http://192.168.1.136:8081' is therefore not allowed access.

错误分析:

禁止跨域问题其实是浏览器的一种安全行为

该问题是由于前端和后台服务器在不同服务器(IP)上,前端访问后台无法通过同一条链路传输数据导致的,这时如果直接ajax远程后台服务器,则会报错

解决方法:

配置nginx,将前端的访问请求和后端的响应都通过nginx反向代理进行处理

类似上面这个:

192.168.1.136:8081  是前端,
192.168.1.137:8081  是后台,tomcat
192.168..11 是nginx服务器

编辑nginx配置文件,配置以下内容

vim from_front_to_background.conf
# For Front end
server {
listen ;
server_name 192.168.1.11;
charset utf-;
location / {
proxy_pass http://192.168.1.136:8081;
}
}
# For background
server {
listen ;
server_name 192.168.1.11;
charset utf-;
location / {
proxy_pass http://192.168.1.137:8081;
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_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

配置完成,重新加载nginx配置文件,前端访问192.168.1.11:8136进行后续调试即可

service nginx reload

其他可以添加的参数:
根据报错内容里找到的,我自己弄的话没用到也可以解决该问题,
如果有问题可以将以下参数添加到location标签里

add_header 'Access-Control-Allow-Origin' 'http://www.zuiyoujie.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET';

第一条:授权从www.zuiyoujie.com的请求,如果要相应来自任何域的请求可以将域名改成“*”,

也有说该方式适用于别人访问我们的情况

第二条:当该标志为真时,响应于该请求是否可以被暴露
第三天:指定请求的方法,可以是GET,POST等

ajax跨域请求测试,成功时,响应头是如下所示:

HTTP/1.1  OK
Server: nginx
Access-Control-Allow-Origin: www.zuiyoujie.com

完毕,呵呵呵呵

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,078
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,553
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,402
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,177
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,814
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898