今日，前端开发要求新的Web服务需要支持跨域，因为要发起 Ajax 到后端web 服务域名请求数据；

前端application域名是 other.abc.com (举个栗子)  api接口域名是 another.abc.com。

后端web application是SpringMVC开发，于是，我在web.xml 配置了新Filter。

Filter代码是这样：

  1.  public class CrossDomainFilter implements Filter {
  2.  
  3.      private static final Logger logger = LoggerFactory.getLogger(CrossDomainFilter.class);
  4.  
  5.      @Override
  6.      public void init(FilterConfig filterConfig) throws ServletException {
  7.  
  8.      }
  9.  
  10.      @Override
  11.      public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
  12.          HttpServletRequest req = (HttpServletRequest) request;
  13.  
  14.          String originDomain = req.getHeader("origin");  
  15.  
  16.          String[] hostSplit = StringUtils.split(originDomain, ".");
  17.          String subDomain = null != hostSplit && hostSplit.length >= 2 ? hostSplit[hostSplit.length - 2] + "." + hostSplit[hostSplit.length - 1] : null;
  18.  
  19.          if (StringUtils.isNotEmpty(originDomain) && StringUtils.isNotEmpty(subDomain) && subDomain.equals("abc.com")) {
  20.              // 允许js 跨域
  21.              HttpServletResponse res = (HttpServletResponse) response;
  22.              res.setHeader("Access-Control-Allow-Origin", originDomain);
  23.              res.setHeader("Access-Control-Allow-Credentials", "true");
  24.              res.setHeader("Access-Control-Allow-Methods", "*");
  25.              res.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
  26.          }
  27.          chain.doFilter(request, response);
  28.  
  29.      }
  30.  
  31.      @Override
  32.      public void destroy() {
  33.  
  34.      }
  35.  }

开发完成后我本地写一个简单的页面做测试，是一个php编写的Web页面，一开始是这样的：

  1.  <html>
  2.  
  3.      <head>
  4.          <title>前端页面 - js跨域local测试</title>
  5.          <script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script>
  6.      </head>
  7.  
  8.      <body>
  9.  
  10.          <a href="javascript:;" class="do_request">请求</a>
  11.  
  12.          <script type="text/javascript">
  13.              $(function () {
  14.                  $(".do_request").on("click", function () {
  15.                      console.log("request sent!");
  16.  
  17.                      $.ajax({
  18.  
  19.                        url: "http://another.abc.com:8080/geo/gpsconvert",
  20.                        data: {
  21.                            "_gps":"120,30"
  22.                        },
  23.  
  24.                        success: function (res) {
  25.                            alert(res.succ);
  26.                        },
  27.                        dataType: "jsonp"
  28.                      });
  29.  
  30.                  });
  31.              });
  32.          </script>
  33.      </body>
  34.  </html>

本地点击发 Ajax 请求给后端接口，发现 req.getHeader("origin")  这个返回总是 null，百思不得其解，

经过前端提示得知，发送ajax 请求必须按照下面：

  1.  $.ajax({
  2.    crossDomain: true,
  3.    url: "http://another.abc.com:8080/geo/gpsconvert",
  4.    data: {
  5.        "_gps":"120,30"
  6.    },
  7.  
  8.    success: function (res) {
  9.          alert(res.succ);
  10.  
  11.    },
  12.    dataType: "json"
  13.  });

服务端的 origin 才能拿到 请求发起方的host，jsonp 不是真正的CORS！而是一种跨域trick，另外

jsonp 只支持GET！

设置  crossDomain: true  后，服务端 origin 正常。

对PHP 来说，只要一行代码：

　　$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : null;

此外，Access-Control-Allow-Origin 的值谁请求上来给谁设置Response Header 即可。不建议设置 为 Access-Control-Allow-Origin: *

这样相当于所有请求的域都允许跨域了，显然不大合适。

JS跨域两三事的更多相关文章

  1. 5种处理js跨域问题方法汇总（转载）

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  2. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  4. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  6. js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  7. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

  8. 三种方法实现js跨域访问

    转自:http://narutolby.iteye.com/blog/1464436 javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...

  9. js跨域问题的解决

    js提交请求给别的应用实例或者别的服务器,由于同源策略,存在js跨域的情况,我所知道两种处理方式: 1.jquery ajax+jsonp <script type="text/jav ...

随机推荐

  1. python笔记01-05

    作者:Vamei 出处:http://www.cnblogs.com/vamei https://blog.csdn.net/flyfrommath/article/details/77447587 ...

  2. 初学ASP.NET 知识点

    1.C# 中的虚方法 和 C++中的作用一致,能让指向子类的父类指针优先到子类中寻找方法,而不是直接调用父类中的方法. 看一段例子回忆下: namespace ConsoleApplication1 ...

  3. CF1029A Many Equal Substrings

    题目描述 你有一个字符串t,它由n个字母组成. 定义一个字符串s的子串为s[l...r],表示从位置l到r构成的一个新的串. 你的目标是构造一个字符串s,使得它的可能长度最小,要求s中存在k个位置i, ...

  4. 如何在Django中配置MySQL数据库

    直接上图 在项目中直接找到settings 文件 第一步       原始Django自带数据库 第二步将配置改成MySQL的数据 第三步  在__init__文件中告知Django使用MySQL数据 ...

  5. Android6.0以上系统动态获取权限

    动态权限的申请方法: 1.首先,需要在AndroidManifest.xml静态申请权限,否则无法动态申请权限: <uses-permission android:name="andr ...

  6. MiniGUI 如何显示繁体字

    有两种编码格式都可以显示繁体字,一种是GBK,一种是BIG5: 由于MiniGUI官方提供的字库的字体大小太小,所以只得自己去做字库,我用一个字库生成软件,分别做了一个GBK编码的字库和一个BIG5编 ...

  7. 关于pom.xml文件中引入net.sf.json-lib出错问题

    关于pom.xml文件中引入net.sf.json-lib出错问题 在项目中引入以下依赖时一直报错 <dependency> <groupId>net.sf.json-lib& ...

  8. UOJ#335. 【清华集训2017】生成树计数 多项式,FFT,下降幂,分治

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ335.html 前言 CLY大爷随手切这种题. 日常被CLY吊打系列. 题解 首先从 pruffer 编码的角度考虑这个问 ...

  9. Beginning Python Games Development

    Like music and movies, video games are rapidly becoming an integral part of our lives. Over the year ...

  10. 027 storm面试小题

    1.大纲 Storm工作原理是什么? 流的模式是什么?默认是什么? 对于mapreduce如何理解? Storm的特点和特性是什么? Storm组件有哪些? 2.Storm工作原理是什么? 相对于ha ...