利用注解的方式解决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. Android热更新实现原理

    最近Android社区的氛围很不错嘛,连续放出一系列的android动态加载插件和热更新库,这篇文章就来介绍一下Android中实现热更新的原理. ClassLoader 我们知道Java在运行时加载 ...

  2. 数据结构C++，线性表的实现

    #include <iostream>#include <sstream>#include <fstream>#include <cmath>#incl ...

  3. openStack 主机流量计运行状态 随笔记录

    root@ruiy-controller:~# ifconfigeth0      Link encap:Ethernet  HWaddr 0c:c4:7a:0d:97:2c          ine ...

  4. Appium + python - get_attribute获取value操作

    from appium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium.w ...

  5. windows10+arch linux双系统 uefi启动

    安装前的准备Archlinux 安装ISO镜像,下载:http://mirrors.163.com/archlinux/iso/2013.05.01/U盘一个,最好1G以上,格式化成FAT32.把下载 ...

  6. Redis(四)-配置

    Redis 配置 Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. 你可以通过 CONFIG 命令查看或设置配置项. 语法 Redis CONFIG 命令格式如下: ...

  7. EntityFramewok 插入Mysql数据库 中文产生乱码解决

    首先Mysql表,建表的时候,有没有选择UTF8,如果是默认的编码latin1,就会产生乱码 这里修改后,还是乱码,那就要检查发生乱码的列是不是UTF8格式 然后修改App.Config或者Web.C ...

  8. css中background-origin属性的使用

    background-origin用来规定元素背景图像的相对定位位置,它有三个属性值: 1.border-box border-box表示元素背景图像相对于border区域开始定位. 代码如下: &l ...

  9. var _this = this 是干什么的

    因为JS可以多层嵌套代码可能下面还可以再嵌一个方法引用this就会变成子方法控制的对象如果需要上级的对象在没有参数的情况下前面前提做了一个临时变量_this可以保存上级对象子方法中就可以用_this来 ...

  10. 搭建Hadoop所遇过的坑

    问题1: 报错信息如下: Container exited with a non-zero exit code 143 Killed by external signal 解决方案: 分配的资源不够, ...