跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用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实现浏览器跨域请求的更多相关文章

  1. MediaElement.js之浏览器跨域请求视频播放

    浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...

  2. Nginx 实现AJAX跨域请求

    在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...

  3. nginx 实现 ajax 跨域请求

    原文:http://www.nginx.cn/4314.html   AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加a ...

  4. nginx解决浏览器跨域问题

    1.跨域问题 浏览器出于安全方面的考虑,只允许与本域下的接口交互.不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源. 例如访问www.test1.com 页面, 返回的文件中需要ajax向 ...

  5. 浏览器跨域请求之credentials

    -时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读 ...

  6. [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  7. [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  8. 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri

    最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...

  9. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

随机推荐

  1. Android 屏幕手势滑动中onFling()函数的技巧分析

    关于如何处理手势操作以及那四个基本固定的顺序我就不讲解了,这里直接跳到我们获得瞬间滑动后回调onFling()这个抽象函数时,应该如何根据参数比较准确的判断滑动方向.如果你没有前面的基础知识,你可以去 ...

  2. Luogu 1437 [HNOI2004]敲砖块 （动态规划）

    Luogu 1437 [HNOI2004]敲砖块 (动态规划) Description 在一个凹槽中放置了 n 层砖块.最上面的一层有n块砖,从上到下每层依次减少一块砖.每块砖都有一个分值,敲掉这块砖 ...

  3. （转）IBM mq基本使用

    一.下载7.5 Trial版本 http://www.ibm.com/developerworks/downloads/ws/wmq/ 这是下载网址,下载前先必须注册IBM ID,下载完成后一路Nex ...

  4. 20145215《网络对抗》Exp9 Web安全基础实践

    20145215<网络对抗>Exp9 Web安全基础实践 基础问题回答 SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符 ...

  5. elasticsearch 动态模板设置

    自定义动态映射 如果你想在运行时增加新的字段,你可能会启用动态映射.然而,有时候,动态映射 规则 可能不太智能.幸运的是,我们可以通过设置去自定义这些规则,以便更好的适用于你的数据. 日期检测 当 E ...

  6. centos6.5环境下安装zk

    第一步:先下载安装包,解压. 第二步:进去根目录,创建data文件夹  mkdir  data 第三步:进去conf文件夹,修改  zoo_sample.cfg    的名字   mv zoo_sam ...

  7. kudu记录-kudu原理

    1.kudu是什么? 2.kudu基本概念 特点:  High availability(高可用性).Tablet server 和 Master 使用 Raft Consensus Algorith ...

  8. jQuery实现滚动监听

    1.设计思路 1)获取窗口滚动高度: 2)获取附加导航栏: 3)获取导航栏下的所有li: 4)通过相同class获取所有监听元素:(此例中为jumbotron巨幕) 5)遍历所有监听元素,若当前元素距 ...

  9. python多进程那点事儿【multiprocessing库】

    前言:项目中有个需求需要对产品的日志处理,按照产品中日志的某些字段,对日志进行再次划分.比如产品的日志中含有字段id,tag=1,现在需要把tag是基数的放到一个文件中,tag是偶数的放入一个文件中. ...

  10. Failed to write core dump. Minidumps are not enabled by default on client versions of Windows

    使用JProfiler监控JAVA程序内存,JVM报错: A fatal error has been detected by the Java Runtime Environment: EXCEPT ...