跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用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. cocos2d-x入门学习笔记，主要介绍cocos2d-x的基本结构，并且介绍引擎自带的示例

    cocos2d-x 3.0 制作横版格斗游戏 http://philon.cn/post/cocos2d-x-3.0-zhi-zuo-heng-ban-ge-dou-you-xi http://blo ...

  3. （转）Maven之自定义archetype生成项目骨架

    背景:最近在开发一个项目的基础构件,在以后项目的开发过程中可以直接使用该构件快速的生成项目骨架进行开发. 摘要:使用过Maven的人都知道maven中有许多功能都是通过插件来提供的,今天我们来说一下其 ...

  4. 由asp的一个错误，看语言的不同：asp & java

    今天查看网页源代码,无意发现源代码尾部抛出asp的错误信息,但没有显示在网页上. 如果没查看源代码,还没发现asp运行代码出错了. 大致情况是这样,在asp中,有一个变量来表示用户当前使用的容量,注意 ...

  5. 字符串数字转换成对应的Double数值

    一,介绍 前面实现了字符串转换成整形数值.参考这里: 它不支持小数,不支持符号(正.负号) 现在实现一个更复杂一点字符串转换成数值的程序. 它支持“浮点字符串”转换成对应的浮点数值,如: " ...

  6. Dom4j工具类源码解析

    话不多说,上源码: package com.changeyd.utils;import java.io.File;import java.io.FileNotFoundException;import ...

  7. 实现一个string类

    实现要实现:构造,析构,拷贝构造,赋值的功能 1. 提供构造函数 string(), string(const string & str),string(const  char * str), ...

  8. 第16月第8天 NSInvocation存储 函数指针 va_arg lldb

    1.NSInvocation存储 -(void)setInvok:(id)target sel:(SEL)sel key:(id)key { if(!target) return; NSMethodS ...

  9. json和jsonp的使用区别

    json和jsonp的使用区别 一．    跨域请求的概念 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象. 二．    json和jsonp JSON是一种基于文本的数据交换方 ...

  10. History API:ScrollRestoration

    By Paul Lewis(设计和性能倡导者)   翻译:江天 使用history api管理url是非常棒的一件事,可以说这是一个好web app的极为重要的特点.但它有一个缺点,滚动位置虽然被存储 ...