跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用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. __AFO

    博主已退役高考,博客基本就很少回复了 NOI2018的游记也没时间写了,以后补上吧[其实是自己懒] 嗯就这样,高三加油!

  2. hdu3506 Monkey Party (区间dp+四边形不等式优化)

    题意:给n堆石子,每次合并相邻两堆,花费是这两堆的石子个数之和(1和n相邻),求全部合并,最小总花费 若不要求相邻,可以贪心地合并最小的两堆.然而要求相邻就有反例 为了方便,我们可以把n个数再复制一遍 ...

  3. Linux下定时器

    http://unix8.net/linux%E4%B8%8B%E5%AE%9A%E6%97%B6%E5%99%A8.html 一. 基础知识 1.时间类型.Linux下常用的时间类型有4个:time ...

  4. 最最最最最基础的SQL Server

    --创建数据库(命名不允许为汉字开头.不允许为数字开头.不允许为符号开头) create database Class --执行完成进行下一步点加go go --定位数据库 use Class --创 ...

  5. Linux下编译安装Lnmp

    1.安装nginx 下载链接http://nginx.org/en/download.html (1)下载,解压 wget http://nginx.org/download/nginx-1.15.8 ...

  6. 记录一次react相关总结

    背景说明:元旦接到一个管理后台的项目,是一个关于自定义专题的项目.通过后台的配置自定义专题,前端根据专题模块进行渲染数据.由于管理后台是react做的前后分离,对于一个后端的我来说写写js也算是浅尝一 ...

  7. 牛客练习赛29 F 算式子

    https://www.nowcoder.com/acm/contest/211/F 经典题. 1.分区间 2.向下取整的值变化 & 合并相同值 #include <bits/stdc+ ...

  8. SIFT特征点检测学习一（转载）

    新手上路,先转载学习tornadomeet的博客:http://www.cnblogs.com/tornadomeet/archive/2012/08/16/2643168.html 特征点检测学习_ ...

  9. 获取当前操作系统的ip

    代码如下: #include "stdafx.h" #include <WinSock2.h> int get_local_ip() { WSADATA wsaData ...

  10. CentOS6.8下MySQL数据库忘记root密码解决方法

    一.更改my.cnf配置文件 编辑/etc/my.cnf文件,在[mysqld]下添加skip-grant-tables,保存退出.如图: 重启mysql服务:services mysqld rest ...