SpringBoot解决ajax跨域问题

一、第一种方式:

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

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请求接口

@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()); // 4

        return new CorsFilter(source);

    }

}

2、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>

三、第三种方式，编写Filter过滤器

package com.cci.market.common.filter;

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;

/**

 * 处理跨域问题

 * @author MR.ZHENG

 * @date 2016/08/08

 *

 */

@Component

public class OriginFilter implements Filter {

    @Override

    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override

    public void doFilter(ServletRequest req, ServletResponse res,

            FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

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

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

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

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

        chain.doFilter(req, res);

    }

    @Override

    public void destroy() {

        // TODO Auto-generated method stub

    }

}

四、Nginx跨域配置

Nginx跨域也比较简单，只需添加以下配置即可。

location / {

    proxy_pass http://localhost:8080;

    if ($request_method = 'OPTIONS') {

        add_header 'Access-Control-Allow-Origin' '*';

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';

        add_header 'Access-Control-Max-Age' 1728000;

        add_header 'Content-Type' 'text/plain; charset=utf-8';

        add_header 'Content-Length' 0;

        return 204;

    }

    if ($request_method = 'POST') {

        add_header 'Access-Control-Allow-Origin' '*';

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';

        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';

    }

    if ($request_method = 'GET') {

        add_header 'Access-Control-Allow-Origin' '*';

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';

        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';

    }

}

其中：add_header 'Access-Control-Expose-Headers' 务必加上你请求时所带的header。例如本例中的“Token”，其实是前端传给后端过来的。如果记不得也没有关系，浏览器的调试器会有详细说明。

SpringBoot解决ajax跨域问题的更多相关文章

SpringBoot解决ajax跨域问题(转载)
一.第一种方式: 1.编写一个支持跨域请求的 Configuration import org.springframework.context.annotation.Configuration; im ...
如何解决ajax跨域问题（转）
由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...
看小白如何解决ajax跨域问题
由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...
如何解决ajax跨域问题
如何解决ajax跨域问题(转) 由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...
如何解决Ajax跨域问题-1
如何解决Ajax跨域问题最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpReque ...
解决ajax跨域问题的一种方法
解决ajax跨域问题的一种方法前后端分离经常用json来传输数据,比较常见的问题就有ajax跨域请求的错误问题,这里是我的一种解决方法: 在java中加入如下的注解类: import org.spr ...
【前端_js】解决ajax跨域请求数据
1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...
谷歌浏览器解决ajax跨域问题
在用mui和H5+做混合开发,会利用HBuildx去真机调试,可真机调试总有问题所在,懂得人自然懂,而我们直接打开页面显示的只有一个静态的页面,是获取不到数据的在这里我想说的不是代码中利用jsonp, ...
如何解决ajax跨域请求？
1.什么是跨域? a.域名不同 b.域名相同,端口不同注:只有域名相同,端口相同时,才可以访问数据可以使用jsonp解决ajax跨域请求的问题. 2.什么是jsonp? Jsonp其实就是一个跨域 ...

随机推荐

TIME_WAIT状态过多的排查
一.概述 (一)现象服务器有两个现象,第一是tcp连接数不多,不超过10个,但是time_wait状态的2000.第二个按照以往的性质,在很少用户访问的情况下,服务器的资源几乎没有使用,比如CPU, ...
为什么需要提前撰写Spec文档
Joel on Software(中文名叫<Joel软件随想录>)算得上是一本旧书了,但里面的建议和讨论,真的是历久弥新.特别是,Joel是个有趣.牛逼的家伙:前微软Excel的职员.St ...
Java 多线程开发之 Callable 与线程池
前言我们常见的创建线程的方式有 2 种:继承 Thread 和实现 Runnable 接口. 其实,在 JDK 中还提供了另外 2 种 API 让开发者使用. 二.简单介绍 2.1 Callabl ...
Android JNI 学习(三)：JNI 数据类型和数据结构
本文我们来讨论一下JNI如何将Java类型映射到本机C类型. 一.基本数据类型如下图表整理了Java基本类型和native对应的关系: Java类型 Native类型描述 boolean jboo ...
PHP全栈学习笔记18
php基础知识,JavaScript,jQuery,ajax基础知识 linux基础知识,mysql数据库的基础与优化程序设计,PHP框架基础知识,算法,逻辑思维,高并发 PHP基础知识引用变量, ...
Kali学习笔记15：防火墙识别、负载均衡识别、WAF识别
防火墙简单的识别方式: 如图: 可以简单明了看出:发送SYN不回应,发送ACK回RST可以说明开启过滤等等基于这个原理,我们可以写一个脚本来对防火墙来探测和识别: #!/usr/bin/python ...
axios的秘密
vue自2.0开始,vue-resource不再作为官方推荐的ajax方案,转而推荐使用axios. 按照作者的原话来说: “Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch ...
为什么我的Linux ls命令不能用了？
扒一扒.net、.net framework、mono和Unity
zhaichao 标签: .net.net frameworkc#monounity 2017-04-23 14:39 425人阅读评论(0) 收藏举报版权声明:本文为博主原创文章,未经博主允许 ...
[译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了
[译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了本文首发自:博客园文章地址: https://www.cnblogs.com/yilezhu/p/ ...