首先了解一下什么是跨域以及解决的几种常见方式。

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同。

举例：

相对于http://store.company.com/dir/page.html

常见的解决跨域访问的方法：

1.JSONP
2.window.name + iframe
3.hash + iframe
4.postMessage
5.CORS
6.WebSockets

概念科普：

CORS是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。
同源策略：是浏览器最核心也最基本的安全功能；同源指的是：同协议，同域名和同端口。精髓：认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源；参考:JavaScript 的同源策略
JSON & JSONP:JSON 是一种基于文本的数据交换方式，或者叫做数据描述格式。JSONP是资料格式JSON的一种“使用模式”，可以让网页从别的网域要资料，由于同源策略，一般来说位于server1.example.com的网页无法与不是 server1.example.com的服务器沟通，而HTML的script元素是一个例外。利用script元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP

其中最常用的应该是前台用JSONP，或者后台用CORS，这里我用的是在JavaWeb项目中用CORS解决。

什么是CORS：

Cross-Origin Resource Sharing（CORS）跨来源资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

使用的例子：

配置过滤器：

package com.wazn.learn.util;

import java.io.IOException;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.FilterConfig;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.annotation.WebFilter;

import javax.servlet.http.HttpServletResponse;

public class SimpleCORSFilter implements Filter {

    @Override

    public void init(FilterConfig filterConfig) throws ServletException {

        System.out.println("SimpleCORSFilter启动！！！===========");

    }

    @Override

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

            throws IOException, ServletException {

        HttpServletResponse res = (HttpServletResponse)response;

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

        res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

        res.setHeader("Access-Control-Max-Age", "3600");

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

        chain.doFilter(request, response);

    }

    @Override

    public void destroy() {

        System.out.println("SimpleCORSFilter结束！！！===========");

    }

}

配置web.xml文件：

      <!-- cors解决跨域访问问题 -->

    <filter>

        <filter-name>cors</filter-name>

        <filter-class>com.wazn.learn.util.SimpleCORSFilter</filter-class>

    </filter>

    <filter-mapping>

        <filter-name>cors</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

调用的方法：

    @RequestMapping("select")

    @ResponseBody

    public JSONObject select(int page , int limit , String title){

        JSONObject jo = new JSONObject();

        Map<String,Object> map = newsService.select(page,limit,title);

        jo.put("code",0);

        jo.put("msg", true);

        jo.put("data", map.get("data"));

        jo.put("count", map.get("count"));

        return jo;

    }

端口为80，也就是默认不输入直接访问

前台测试方法：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

    </head>

    <body>

        <h1>ajax测试接口</h1>

    </body>

    <script type="text/javascript">

        $(function() {

            $.ajax({

                type:"post",

                url:"http://192.168.1.113/basepro/knowledge/news/select",

                data:{

                    page:1,

                    limit:1000

                },

                dataType:"json",//返回的

                success:function(data) {

                    alert(data.msg);

                },

                error:function(msg) {

                    console.log(msg);

                }

            });

        });

    </script>

</html>

测试成功！

cors解决Web跨域访问问题的更多相关文章

  1. 基于CORS的GeoServer跨域访问策略

    GeoServer的跨域访问问题,有多种解决方法,本文介绍一种基于CORS的GeoServer跨域访问方法. CORS简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cro ...

  2. web跨域访问，session丢失的问题

    web跨域访问,session丢失的问题25 http://www.iteye.com/problems/71265 http://www.iteye.com/topic/264079 具体情况如下: ...

  3. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  4. 解决cookie跨域访问

    一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...

  5. 使用微软CORS包不能跨域访问的问题

    使用jquery的ajax异步调用的时候会出现不能跨域访问的问题,这个问题一般有两种方法. 1:使用jsonp跨域 2:使用html5的CORS 在这里只谈论第二种,微软对CORS提供的了支持,在Nu ...

  6. 解决ajax跨域访问sessionid不一致问题

    根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务器就会以为 ...

  7. 解决cookie跨域访问.2

    v一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入 ...

  8. 使用JSONP彻底解决Ajax跨域访问Cookie Session的方案

    最近做开发时要把图片文件放到另外一台服务器上(另外一个域名),因为这样分布式存放,网站打开速度会快很多.而我采用AJAX获取图片服务器上某用户的图片时遇到了问题,按照通常的方式无法获取信息,得到的Co ...

  9. 解决Js跨域访问的问题

    1,最近有个需求,用Js获取Html标签<input type="file"/>的路径!遇到代码拒绝访问,提示安全验证,不允许跨域访问,简单的设置一下浏览器即可,不过对 ...

随机推荐

  1. CocoaPods 安装及使用

    1.开启 terminal 2.移除现有 Ruby 默认源 $ gem sources --remove https://rubygems.org/ 3.使用新的源 $ gem sources -a ...

  2. P2915 [USACO08NOV]奶牛混合起来Mixed Up Cows

    题目描述 约翰家有N头奶牛,第i头奶牛的编号是Si,每头奶牛的编号都是唯一的.这些奶牛最近 在闹脾气,为表达不满的情绪,她们在挤奶的时候一定要排成混乱的队伍.在一只混乱的队 伍中,相邻奶牛的编号之差均 ...

  3. npoi导入导出

    NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作. NPOI是一个开源的Java读写Excel.WORD等微软OLE ...

  4. TypeScript入门，使用TypeScript编写第三方控件的方式！

    这是一篇新手篇的typescript插件编写方式!!!! 源码完整地址:https://gitee.com/dissucc/typescriptLearn 1.环境安装 node下载 下载地址:htt ...

  5. css随笔属性

    anchor伪类,用于阅读文章.a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)a:visited(访问过的 ...

  6. Failed to load the JNI shared lib...

    启动eclipse报错:Failed to load the JNI shared lib... 解决办法如下:保证JDK与eclipse相匹配 在同一台计算机中,如果JDK是32位的,那么eclip ...

  7. DIN(Deep Interest Network of CTR) [Paper笔记]

    背景 经典MLP不能充分利用结构化数据,本文提出的DIN可以(1)使用兴趣分布代表用户多样化的兴趣(不同用户对不同商品有兴趣)(2)与attention机制一样,根据ad局部激活用户兴趣相关的兴趣(用 ...

  8. Servlet实践--留言板-v1

    功能介绍: 由三个jsp页面组成,在doGet中根据请求URL中的请求参数不同,跳转到不同的页面: 页面1:显示整个留言板列表 页面2:创建留言页面(包括用户.主题.内容和上传文件) 页面3:在查看单 ...

  9. CCS模块库文件的生成与使用

    在一个大的项目中,为了便于管理,有时需要将一个模块封装为库文件,并可以在项目中使用. 图表 1 项目 步骤如下: 1.右键-->new-->CCS Project 图表 2 新建ccs p ...

  10. oracle 数据库中的序列

    序列是什么,通俗点说,序列就是按照一定顺序进行排列,序列会自动给你递增,生成唯一的序列号: oracle数据库不同于sqlServer数据库,oracle数据库中是没有自增长列,使用的是sequenc ...