利用注解的方式解决AJAX请求跨域问题

1.编写一个支持跨域请求的 Configuration

- 第一种方式

- CorsConfig.java

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**

 * 处理AJAX请求跨域的问题

 * @author Levin

 * @time 2017-07-13

 */

@Configuration

public class CorsConfig extends WebMvcConfigurerAdapter {

    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)

                .maxAge(3600);

    }

}

2.HTTP请求接口

- HelloController.java

@RestController

public class HelloController {

    @Autowired

    HelloService helloService;

    @GetMapping(value = "/test", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)

    public String query() {

        return "hello";

    }

}

- 第二种方式（推荐）

PS：第一种存在一个问题，当服务器抛出 500 的时候依旧存在跨域问题

@SpringBootApplication

@ComponentScan

@EnableDiscoveryClient

public class ManagementApplication {

    public static void main(String[] args) {

        SpringApplication.run(ManagementApplication.class, args);

    }

    private CorsConfiguration buildConfig() {

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        corsConfiguration.addAllowedOrigin("*");

        corsConfiguration.addAllowedHeader("*");

        corsConfiguration.addAllowedMethod("*");

        corsConfiguration.addExposedHeader(HttpHeaderConStant.X_TOTAL_COUNT);

        return corsConfiguration;

    }

    /**

     * 跨域过滤器

     *

     * @return

     */

    @Bean

    public CorsFilter corsFilter() {

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        source.registerCorsConfiguration("/**", buildConfig()); //

        return new CorsFilter(source);

    }

}

- index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>跨域请求</title>

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $.ajax({url:"http://localhost:8080/test",success:function(result){

            $("#p1").html(result);

        }});

    });

});

</script>

</head>

<body>

<p width="500px" height="100px" id="p1"></p>

<button>获取其他内容</button>

</body>

</html>

SpringBoot支持AJAX跨域请求的更多相关文章

  1. springboot：ajax跨域请求解决方案

    Cors详细介绍请看阮一峰的跨域资源共享 CORS 详解:http://www.ruanyifeng.com/blog/2016/04/cors.html SpringBoot使用CROS解决跨域问题 ...

  2. WebApi 自定义过滤器实现支持AJAX跨域的请求

    我想关于此类话题的文章,大家一搜铺天盖地都是,我写此文的目的,只是对自己学习过程的记录,能对需要的朋友有所帮助,也百感荣幸!!!废话不多说,直接上代码! 客户端:很简单的AJAX请求 <html ...

  3. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  4. 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  5. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  6. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  7. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

  8. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  9. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

随机推荐

  1. Sqlserver 数据库恢复常见错误及解决（网站转载 留着备用）

    数据库恢复常见错误及解决 2009-04-13 11:25 1145人阅读 评论(0) 收藏 举报 数据库databasesqlserverusermicrosoftsql server 在sqlSe ...

  2. sql将一个表中的数据插入到另一个表中

    sql将一个表中的数据插入到另一个表中 列名不一定要相同,只要你在HH中列出要插入列的列表跟select   from   mm表中的选择的列的列表一一对应就可以了,当然两边的数据类型应该是兼容的.  ...

  3. AMD 与 CMD 区别

    作者:玉伯链接:https://www.zhihu.com/question/20351507/answer/14859415来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  4. A - Petya and Strings

    Problem description Little Petya loves presents. His mum bought him two strings of the same size for ...

  5. Could not create the view: An unexpected exception was thrown. Myeclipse空间报错

    我的路径D:\MyEclipse 10\.metadata\.plugins\org.eclipse.core.runtime\.settings 我也遇到过这个问题,就是工作空间的问题好像是删除你工 ...

  6. elasticsearch5.3.0 bulk index 性能调优实践

    elasticsearch5.3.0 bulk index 性能调优实践 通俗易懂

  7. MVC简单的解释

    MVC (Model-View-Controller,模型视图控制器)是一种软件的设计模式,它最早是由 20 世纪 70 年代的 Smalltalk 语言提出的,即把一个复杂的软件工程分解为三个层 ...

  8. android黑科技系列——Apk混淆成中文语言代码

    一.前言 最近想爆破一个app,没有加壳,简单的使用Jadx打开查看源码,结果把我逗乐了,代码中既然都是中文,而且是一些比较奇葩的中文字句,如图所示: 瞬间感觉懵逼了,这app真会玩,我们知道因为Ja ...

  9. logical vs physical address

    Logical vs physical address  1) An address generated by the CPU is a logical address. Whereas, an ad ...

  10. 揭开jQuery的面纱－jQuery选择器简介(二）

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 “$”是选择器不可缺少的部 ...