方法1. jsonp实现ajax跨域访问示例

jsp代码：

<body>

    <input type="button" onclick="testJsonp();" value="TestJsonP">

</body>

js代码:

function testJsonp(){

    $.ajax({

        type : 'GET',

        dataType : 'jsonp', // 数据类型配置成jsonp

        jsonp : "callback", //配置jsonp随机码标签,在服务器代码部分需要用到他来拼接一个json的js对象

        url : 'http://127.0.0.1:8001/test', //服务路径

        async : false,

        data: {

            "type":'0',

        },

        success : function (response) {

            if(response.code == 200){

                alert('返回成功！');

            }else{

                alert('服务器异常！');

            }

        },

        error : function (){

            alert('服务器异常！');

        }

    });

}

java代码:

    @RequestMapping(value = "/test", method = RequestMethod.GET)

    public @ResponseBody String testJsonp(@RequestParam(value = "type", defaultValue = "") String type, String callback) {

        RequestResult data = new RequestResult(); // 配置需要返回的结果

        data.setCode(200);

        data.setMessage("success");

        // 接收参数callback名称需要与js中配置的jsonp标签名一致

        String result = callback+"("+JSONObject.fromObject(data).toString()+")";//拼接可执行的js

        return result;

    }

几个注意点：

1. jsonp只支持GET方式的请求，无论ajax中的type配置成何种方式，都会在默认以GET方式发送请求。无法满足restful方式的请求。

2. ajax中的jsonp的标签名要与服务端的接收标签参数一致。本例中都设置为'callback'.

3. 若想传递一个json格式的js对象到服务器，可以使用JSON.stringify()方法将js对象转化为json字符串，赋值到某个变量。在服务器端获取这个变量的值通过json工具，将该字符串转化为java对象。

方法2. 在服务器端放开访问权限，使允许接收ajax访问

前端代码不需修改。

java代码, 在BaseController中加入：

    // protected HttpServletRequest request;
    protected HttpServletResponse response;

    // protected HttpSession session;

    @ModelAttribute

    public void setReqAndRes(HttpServletRequest request, HttpServletResponse response) {

        // this.request = request;

        this.response = response;

        // this.session = request.getSession();

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

    }

    @RequestMapping(value = "/test", method = RequestMethod.GET)

    public @ResponseBody RequestResult test() {

        RequestResult result = new RequestResult();

        result.setCode(200);

        result.setMessage("success");

        return result;

    }

说明：ModelAttribute的作用
1)放置在方法的形参上：表示引用Model中的数据
2)放置在方法上面：表示请求该类的每个Action前都会首先执行它，也可以将一些准备数据的操作放置在该方法里面。

这种方式只允许GET方式的请求，无法满足restful格式的请求。

方法3.终极解决办法（方法2的升级版）

前端代码不需修改。

在服务器端写一个filter，在doFilter方法中全面放开访问权限，并将此filter配置到web.xml中，或直接使用注解，划入spring管理。此方法完全支持restful的ajax跨域请求。

下面给一下spring mvc框架下的一个解决示例（亲测可用）：

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.http.HttpServletResponse;

import org.springframework.stereotype.Component;

@Component("myFilter")

public class MyFilter implements Filter {

    public void destroy() {

        // System.out.println("过滤器销毁");

    }

    public void doFilter(ServletRequest request, ServletResponse response1, FilterChain chain) throws IOException,

            ServletException {

        // System.out.println("执行过滤操作");

        HttpServletResponse response = (HttpServletResponse) response1;

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

        response.setHeader("Access-Control-Allow-Headers",

                "User-Agent,Origin,Cache-Control,Content-type,Date,Server,withCredentials,AccessToken");

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

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

        response.setHeader("Access-Control-Max-Age", "1209600");

        response.setHeader("Access-Control-Expose-Headers", "accesstoken");

        response.setHeader("Access-Control-Request-Headers", "accesstoken");

        response.setHeader("Expires", "-1");

        response.setHeader("Cache-Control", "no-cache");

        response.setHeader("pragma", "no-cache");

        chain.doFilter(request, response);

    }

    public void init(FilterConfig arg0) throws ServletException {

        // System.out.println("过滤器初始化");

    }

}

参考文章：

Ajax跨域（jsonp） 调用JAVA后台 (http://www.cnblogs.com/holdon521/p/5282354.html)

springMVC获取request和response (http://blog.sina.com.cn/s/blog_7085382f0102v9jg.html)

REST跨域访问解决CorsFilter (http://blog.csdn.net/u013628152/article/details/49490213)

Spring Boot 过滤器、监听器 (http://blog.csdn.net/catoop/article/details/50501688)

Ajax跨域访问解决办法的更多相关文章

  1. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  2. (转)jquery ajax使用及跨域访问解决办法

    原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...

  3. ASP.net Web API允许跨域访问解决办法

    来源 http://blog.csdn.net/wxg_kingwolfmsncn/article/details/48545099 遇到此跨域访问问题,解决办法如下:   方法一:   1. 在we ...

  4. 基于.Net Framework 4.0 Web API开发（5）：ASP.NET Web APIs AJAX 跨域请求解决办法（CORS实现）

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  5. ajax跨域终极解决办法！

    在使用 ajax 的时候,往往需要通过 ajax 跨域请求一些? 但是 XMLHTTPRequest 是不支持跨域的,所以产生了 JSONP 这个东西来解决跨域,当然解决跨域的方式有很多种.... 第 ...

  6. ajax跨域的解决办法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content ...

  7. vue-cli开发时，ajax跨域详细解决办法

    在config/index.js中进行如下配置 [即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址] proxyTable: { '/ ...

  8. Hbuilder编辑App时，ajax跨域访问失败问题

    今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...

  9. 浅析JSONP-解决Ajax跨域访问问题

    浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...

随机推荐

  1. IO队列和IO调度

    IO体系概览 先看看本文主题IO调度和IO队列处于整个IO体系的哪个位置,这个IO体系是非常重要的,了解IO体系我们可以对整个IO过程有个全面的认识.虽然一下两下并不清楚IO体系各个部分的细节,但是我 ...

  2. .NET(C#)：分析IL中的if-else，while和for语句并用Emit实现

    这是一篇关于IL和反射Emit的文章(所以不喜欢IL或者Emit的就没必要往下看了),要求读者对IL和Emit工作原理较了解.所有分析IL均在Visual Studio 2010 SP1下编译生成.( ...

  3. Flashback Query(函数示例）

    Flashback Query 函数,存储过程,包,触发器等对象Flashback Drop 可以闪回与表相关联的对象, 如果是其他的对象,比如function,procedure,trigger等. ...

  4. Https协议简析及中间人攻击原理

    1.基础知识 1.1 对称加密算法 对称加密算法的特点是加密密钥和解密密钥是同一把密钥K,且加解密速度快,典型的对称加密算法有DES.AES等                              ...

  5. html进阶css（3）

    css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...

  6. PHP学习笔记十五【面向对象二】

    <?php class Cat{ //public 访问修饰符 public $name; public $age; } //创建 $cat1=new Cat; $cat1->name=& ...

  7. oracle索引学习

    查看执行状态: 选中代码直接按F5,或者点击Tools===>>Explain Plan 一.索引的注意事项: 当任何单个查询要检索的行少于或者等于整个表行数的10%时,索引就非常有用.这 ...

  8. OC中限制UITextView的最大字数的实现

    一.属性 //自定义的textview @property (weak, nonatomic) IBOutlet UITextView *textview; //添加一个bool类型的属性 @prop ...

  9. javascript延迟加载及异步(defer和async)

    一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...

  10. jsp生成html

    这几天公司需要生成静态的HTML页面以减小数据库与服务器的压力和负担,于是在网络上一阵狂搜,找到几篇相当不错的文章和一些相当有用的资料.为了方便,我整理在自己的BLOG,以供参考! 在接下来的应用中, ...