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

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

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

Filter代码是这样：

 public class CrossDomainFilter implements Filter {

     private static final Logger logger = LoggerFactory.getLogger(CrossDomainFilter.class);

     @Override

     public void init(FilterConfig filterConfig) throws ServletException {

     }

     @Override

     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

         HttpServletRequest req = (HttpServletRequest) request;

         String originDomain = req.getHeader("origin");  

         String[] hostSplit = StringUtils.split(originDomain, ".");

         String subDomain = null != hostSplit && hostSplit.length >= 2 ? hostSplit[hostSplit.length - 2] + "." + hostSplit[hostSplit.length - 1] : null;

         if (StringUtils.isNotEmpty(originDomain) && StringUtils.isNotEmpty(subDomain) && subDomain.equals("abc.com")) {

             // 允许js 跨域

             HttpServletResponse res = (HttpServletResponse) response;

             res.setHeader("Access-Control-Allow-Origin", originDomain);

             res.setHeader("Access-Control-Allow-Credentials", "true");

             res.setHeader("Access-Control-Allow-Methods", "*");

             res.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

         }

         chain.doFilter(request, response);

     }

     @Override

     public void destroy() {

     }

 }

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

 <html>

     <head>

         <title>前端页面 - js跨域local测试</title>

         <script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script>

     </head>

     <body>

         <a href="javascript:;" class="do_request">请求</a>

         <script type="text/javascript">

             $(function () {

                 $(".do_request").on("click", function () {

                     console.log("request sent!");

                     $.ajax({

                       url: "http://another.abc.com:8080/geo/gpsconvert",

                       data: {

                           "_gps":"120,30"

                       },

                       success: function (res) {

                           alert(res.succ);

                       },

                       dataType: "jsonp"

                     });

                 });

             });

         </script>

     </body>

 </html>

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

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

 $.ajax({

   crossDomain: true,

   url: "http://another.abc.com:8080/geo/gpsconvert",

   data: {

       "_gps":"120,30"

   },

   success: function (res) {

         alert(res.succ);

   },

   dataType: "json"

 });

服务端的 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. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

  2. Uncaught DOMException: Failed to construct 'WebSocket': The URL

    生成socket对象地址有误

  3. docker简单介绍----Dockerfile命令

    DockerFile的组成部署: 下面优先介绍下Dcokerfile的基础指令 一.CMD指令:容器启动时要莫热门运行的命令,如果有多个CMD指定,最后一个生效 使用方法: CMD ["ex ...

  4. Go命令官方指南【原译】

    启动错误报告 编译包和依赖项 删除目标文件和缓存的文件 显示包或符号的文档 打印Go环境信息 更新包以使用新API Gofmt(重新格式化)包源 通过处理源生成Go文件 下载并安装包和依赖项 编译并安 ...

  5. 无向图 解决Unity地图上固定网络上，标记走固定步数能到达的位置

    首先需要了解无向图的定义 参考:https://www.cnblogs.com/wxgblogs/p/5572391.html 我们选择链表的方式进行操作. int StartPositon; int ...

  6. django ajax 及批量插入数据 分页器

    ``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...

  7. bzoj 3697

    题目描述:这里 发现还是点对之间的问题,于是还是上点分 只不过是怎么做的问题 首先对每条边边权给成1和-1(即把原来边权为0的边边权改为-1),那么合法的路径总权值一定为0! 还是将路径分为经过当前根 ...

  8. centos修改SSH端口并禁用root远程登录

    1.使用 root 用户执行以下步骤:只在 CentOS 6.5 下验证. 2.先查看下服务器端口号范围: # sysctl -a|grep ip_local_port_range 3.修改端口 vi ...

  9. 初探 Liunx 的命令模式（一）

    1.从 X window 切换到  纯命令模式 Ctrl+Alt+[F2-F6].切换回来 Ctrl+Alt+[F2-F6]. 2. 1)CentOS Linux 7 (Core)代表 Linux d ...

  10. 如何在本地数据中心安装Service Fabric for Windows集群

    概述 首先本文只是对官方文档(中文,英文)的一个提炼,详细的安装说明还请仔细阅读官方文档. 虽然Service Fabric的官方名称往往被加上Azure,但是实际上(估计很多人不知道)Service ...