跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用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. suoi38 卖XY序列 (贪心+前缀和)

    因为只能带一个,买卖价格又一样,所以只要右边的比左边的大,就从这买下来然后带到下一个卖掉就行了(我想到别处再卖的话大不了再重新买回来嘛) 所以给max(w[i]-w[i-1],0)维护一个前缀和就行了 ...

  2. linux已开机时间 系统信息

    linux 查看系统运行时间 (从开机当现在的开机时间) 1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0. ...

  3. （转）sublime text3简体中文版汉化教程

    preferens——package controller——输入 install package——等待安装完成后输入 localizationChinese 请使用主菜单的 帮助/Language ...

  4. 提高磁盘访问性能 - NtfsDisableLastAccessUpdate

    这个技巧可以提高磁盘访问性能,不过仅适用于NTFS文件系统. 我们知道,当在磁盘管理应用程序中列出目录结构时──效果类似“资源管理器”.“文件管理 器”(Windows NT  3.xx/4.0下的称 ...

  5. VB|xp风格：终于解决了“图片优化软件”在部分xp系统上无法启动的问题。

    一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到p ...

  6. javascript面向对象精要第六章对象模式整理精要

    混入是一种给对象添加功能同时避免继承的强有力的方式,混入时将一个属性从一个对象 复制到另一个,从而使得接收者在不需要继承的情况下获得其功能.和继承不同,混入之后 对象无法检查属性来源.因此混入最适宜用 ...

  7. 和我一起使用postcss+gulp进行vw单位的移动端的适配

    随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题. 但是有一个单位vw就神奇的解决了这个问题.vw和vh是相对于 ...

  8. python---tornado框架模板引擎本质compile和exec(eval)

    namespace = {'name':'sda','age':[12,46,24],} code = """def say(): return 'name %s, ag ...

  9. JAVA记录-redis缓存机制介绍（三）

    Redis 事务 Redis 事务可以一次执行多个命令, 并且带有以下两个重要的保证: 事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的 ...

  10. Idea下安装Lombok插件

    参照:http://www.cnblogs.com/holten/p/5729226.html https://yq.aliyun.com/articles/59972 lombok是一个可以通过简单 ...