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

        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”，其实是前端传给后端过来的。如果记不得也没有关系，浏览器的调试器会有详细说明。

來源链接：http://www.jianshu.com/p/e57ed1ee3070

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其实就是一个跨域 ...

随机推荐

Activity的跳转及返回值的四种方法
Activity生命周期从创建到销毁的生命周期: onCreate()→onStart()→onResume()→onPouse()→onStop()→onDestroy() 从起动到后台再到前台: ...
Nginx常见错误及处理方法(转)
404 bad request 一般原因:请求的Header过大解决方法:配置nginx.conf相关设置 client_header_buffer_size 16k; large_client_h ...
通过url下载文件到指定目录 java
import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.File; import java.io ...
第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可 ...
mysql router使用配置
mysql router使用配置参考资料: https://www.jianshu.com/p/7fc8d77bea59 一.架构图介绍: MySQL Router是处于应用client和dbse ...
“美登杯”上海市高校大学生程序设计邀请赛 (华东理工大学) E 小花梨的数组线段树
题意分析预处理出每个数的最小素因子,首先可以知道\(minprime(x*minprime(x))=minprime(x)\),我们用线段树维护区间最大值\(mx[p]\),注意这里的最大值并不是 ...
如何在main.js中改变vuex中的值？
做登录权限控制的时候, 我通过全局路由守卫来去做权限判断,这样的话可能需要在整个项目加载的初期去做一些诸如接口请求. vuex修改之类的问题其实非常简单,直接如图:
「CTSC 2008」祭祀
题目链接戳我 \(Solution\) 第一问这道题要知道一个叫做\(Dilworth\)的定理最长反链\(=\)最小链覆盖证明(\(from\ r\_64\)): 所以我们只要求一个最小链覆 ...
Keras学习笔记三：一个图像去噪训练并离线测试的例子，基于mnist
训练模型需要的数据文件有: MNIST_data文件夹下的mnist_train.mnist_test.noisy_train.noisy_test.train文件夹下60000个图片,test下10 ...