使用nginx实现浏览器跨域请求
跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用nginx反向代理来解决跨域问题。
啥是跨域？
假如你是百度开发人员, 在百度页面去请求谷歌的资源, 算不算跨域?
跨域是指一个域名的网页去请求另一个域名的资源. 只要协议, 域名, 端口中, 有任何一个不同, 都是跨域.
谁限制了我们跨域？
罪魁祸首, 是浏览器. 为了安全考虑. 如果一个网站可以随意的访问另一个网站的资源, 那么就有可能在客户不知情的情况下, 出现安全问题.
比如:
1. 用户访问淘宝, 进行了付钱操作, 这时cookie都生成, 存放在浏览器端.
2. 付完钱后, 小伙去看了看苍老师(虽然她要结婚了, 但是不影响嘛)
3. 这时候, 看苍老师的网站, 拿到了淘宝的cookie, 那是否可以替他买东西呢?
4. 如果浏览器不限制, 且淘宝也没有做相应的安全处理, 那么还是有可能替他消费的.
为啥要跨域？
前端时间, 公司.net 项目的成员找到我们, 说想访问我们的资源, 希望我们修改配置, 支持他们跨域访问. 那不能拒绝啊, 都是为了工作嘛(主要是没有拒绝的权利嘛)。即使是同一家公司, 都会出现跨域访问的问题, 那我能不让他访问我这边的资源吗? 很明显, 做不到嘛, 那不还是要跨域！
Ok, 前面说了那么多, 该进入主题了. 今天就用nginx来实现跨域访问, 消除 服务提供者的配置操作.
一. 重现跨域问题
新建两个项目, 一个用来提供数据, 一个用来访问数据
server: 提供数据, 8081端口
建一个项目 : server, 在其中加入一个控制器, 提供数据
我只贴一些主要代码了.
@RestController
@RequestMapping("data")
public class DataController {
@RequestMapping("get")
public List<Book> get(){
List<Book> list = new ArrayList<>();
list.add(new Book("海底两万里", 3000L));
list.add(new Book("三体", 1000L));
list.add(new Book("大鲸鱼", 2000L));
list.add(new Book("是什么限制了我们的想象力", 4000L));
return list;
}
}
client: 访问数据, 8082端口
<html>
<body>
<h2>Hello World! client</h2>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function () {
console.log("ajax start ...");
$.ajax({
url:'http://localhost:8081/server/data/get',
type:'get',
success:function (data) {
console.log(data);
},
error:function (data) {
console.log(data);
}
});
});
</script>
</body>
</html>
发布到本地tomcat中
1. 将webapps拷贝两份, 分别命名为 webappsclient, webappsserver
将发布获取到的解压文件夹, 分别放进去.
2. 修改tomcat配置文件，在server.xml文件中, 加入两个节点
<Service name="Catalina1">
<Connector port="8081" maxHttpHeaderSize="8192"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" redirectPort="8443" acceptCount="100"
connectionTimeout="20000" disableUploadTimeout="true" />
<Connector port="8009" enableLookups="false" redirectPort="8443" protocol="AJP/1.3" />
<Engine name="Catalina1" defaultHost="localhost">
<Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/>
<Host name="localhost" appBase="webappsserver"
unpackWARs="true" autoDeploy="true"
xmlValidation="false" xmlNamespaceAware="false">
</Host>
</Engine>
</Service>
<Service name="Catalina2">
<Connector port="8082" maxHttpHeaderSize="8192"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" redirectPort="8443" acceptCount="100"
connectionTimeout="20000" disableUploadTimeout="true" />
<Connector port="8009" enableLookups="false" redirectPort="8443" protocol="AJP/1.3" />
<Engine name="Catalina2" defaultHost="localhost">
<Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/>
<Host name="localhost" appBase="webappsclient"
unpackWARs="true" autoDeploy="true"
xmlValidation="false" xmlNamespaceAware="false">
</Host>
</Engine>
</Service>
3. 启动tomcat, 验证访问结果
别急, 按下 f12 看看
报错, 不给数据给我.
二. 解决跨域问题
1. 修改nginx配置文件, 反向代理这两个服务. 然后启动nginx服务
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://10.10.21.11:8081;
index index.html index.htm;
}
}
server {
listen 8082;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://10.10.21.11:8082;
index index.html index.htm;
proxy_redirect default;
}
location /apis{
rewrite ^.+apis/?(.*)$ /$1 break;
proxy_pass http://10.10.21.11:8081;
}
}
2. 修改ajax访问地址, 别的不需要动
3. 查看访问结果
这里的ip是nginx服务器的ip
这才是我需要的数据.
接下来看一下, 发送出去的请求是啥样的.
从地址上看, 并没有访问别的地址资源, 那么浏览器, 就认为, 没有跨域, 是同源的. 事实上, nginx通过反向代理, 将请求转发给 8081 了. 就这么的, 骗过了浏览器.
使用nginx实现浏览器跨域请求的更多相关文章
- MediaElement.js之浏览器跨域请求视频播放
浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...
- Nginx 实现AJAX跨域请求
在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...
- nginx 实现 ajax 跨域请求
原文:http://www.nginx.cn/4314.html AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加a ...
- nginx解决浏览器跨域问题
1.跨域问题 浏览器出于安全方面的考虑,只允许与本域下的接口交互.不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源. 例如访问www.test1.com 页面, 返回的文件中需要ajax向 ...
- 浏览器跨域请求之credentials
-时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读 ...
- [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
- [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
- 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri
最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
随机推荐
- Spring Cloud(五) --- zuul
微服务网关 在微服务架构中,后端服务往往不直接开放给调用端,而是通过一个API网关根据请求的url,路由到相应的服务.当添加API网关后,在第三方调用端和服务提供方之间就创建了一面墙,这面墙直接与调用 ...
- CF 989
今天晚上闲来无事打了一场CF......div.2,第600名.太弱了. T1看懂题之后发现是水题(废话),6min AC. T2仔细思考之后发现可做,但是由于n=p的特判没确定到底有没有解,WA了一 ...
- P3747 相逢是问候 欧拉定理+线段树
巨难!!! 去年六省联考唯一的一道黑牌题,我今天一天从早到晚,把它从暴力15分怼到了90分,极端接近正解了. bzoj上A了,但是洛谷和loj上面就不行.伪正解会T,奇奇怪怪的类正解会WA.. 那么, ...
- json.stringify和json.parse,序列化和反序列化
json.stringify()是序列化函数,用于将对象转化为字符串:json.parse()是反序列化函数,用于将字符串转化为json对象 一.序列化: var o={name:'wen',age: ...
- SDRAM学习笔记（二）
上一篇博客主要讲解了一下SDRAM整体结构以及PCB方面的注意事项.接下来讲解一下需要用到的一些命令. 1.常用命令的缩写 上述是常用到的一些指令集. 2.模式寄存器 (1)突发长度 通过对A0~ ...
- ulimit常用参数介绍
ulimit常用参数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. ulimit 用于限制 shell 启动进程所占用的资源,支持以下各种类型的限制:所创建的内核文件的大小.进 ...
- idea出现乱码问题
Intellij Idea打包工程时控制台显示乱码 这主要是maven编译时编码问题导致的.在Intellij的settings中maven的run配置中设置它的VM Options为-Darchet ...
- 17. Spring Boot 配置嵌入式Servlet容器
一.如何定制和修改Servlet容器的相关配置 1.配置文件(ServerProperties): 优先级最高 server.port=8081 server.context‐path=/crud s ...
- buildroot构建项目（七）--- u-boot 2017.11 适配开发板修改 4 ---- 系统启动初始化之四
设置完寄存器控制器后,则跳出cpu_init_crit,进入_main 函数.即进入crt0.S (arch\arm\lib) 跟着代码流程慢慢走 一.crt0.S 1.1 第一步执行代码 /* 预 ...
- js 拖拽 碰撞 + 重力 运动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...