SpringBoot解决ajax跨域问题的方法
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”，其实是前端传给后端过来的。如果记不得也没有关系，浏览器的调试器会有详细说明。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- Spring boot 总结之跨域处理cors的方法
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- Spring boot跨域设置实例详解
- 浅谈spring-boot 允许接口跨域并实现拦截（CORS）
- Spring Boot实现跨域访问实现代码
- Spring Boot Web应用开发 CORS 跨域请求支持
- spring boot配合前端实现跨域请求访问
- Java Spring boot 2.0 跨域问题的解决
相关推荐
-
Spring boot 总结之跨域处理cors的方法
背景 现在做的很多项目都是前后端分离的,这就引出一个很常见的问题,我们的页面和接口是在不同域名下的,当我们通过ajax访问后端接口的时候就会出现跨域问题,这种问题我们怎么解决呢?一般来说就是cors和jsonp这两种方案.Spring简化了cors的配置,接下来我们来看一下它提供的cors. 跨域问题描述 Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等. CORS 与 JSONP 相比: 1. JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 H
-
spring boot配合前端实现跨域请求访问
一.方法: 服务端设置Respone Header头中Access-Control-Allow-Origin 配合前台使用jsonp 继承WebMvcConfigurerAdapter 添加配置类 二.实例: 1.前端:因为我们用了前后端分离,前端用node服务器,node服务器再用了ajax反向代理请求到我的spring boot 服务器.其中node服务器也用了ajax发出请求所以也存在跨域的问题.具体代码: app.all(apiRoot + '/*', proxy('127.0.0.1:
-
Spring Boot实现跨域访问实现代码
当前使用spring版本是4.3.9 import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Component public class CorsFilter im
-
Spring Boot Web应用开发 CORS 跨域请求支持
一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等 CORS与JSONP相比 1. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求. 2. 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理. 3. JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS 浏览器支持情况 Chrome 3+ Firefox 3.5+ Opera 12+ Sa
-
浅谈spring-boot 允许接口跨域并实现拦截（CORS）
本文介绍了spring-boot 允许接口跨域并实现拦截(CORS),分享给大家,也给自己留个笔记 pom.xml(依赖的jar) // 在spring-boot-starter-web的启动器中,已经依赖好了 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependen
-
Spring boot跨域设置实例详解
定义:跨域是指从一个域名的网页去请求另一个域名的资源 1.原由 公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域 本人是springboot菜鸟,但是做测试框架后端需要使用Springboot和前端对接,出现跨域问题,需要设置后端Response的Header.走了不少坑,在这总结一下以备以后使用 2.使用场景
-
Java Spring boot 2.0 跨域问题的解决
跨域 一个资源会发起一个跨域HTTP请求(Cross-site HTTP request), 当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时 . 比如说,域名A(http://domaina.example)的某 Web 应用程序中通过标签引入了域名B(http://domainb.foo)站点的某图片资源(http://domainb.foo/image.jpg),域名A的那 Web 应用就会导致浏览器发起一个跨站 HTTP 请求.在当今的 Web 开发中,使用跨站 HTTP
-
vue+springboot前后端分离实现单点登录跨域问题解决方法
最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,
-
SpringBoot解决ajax跨域问题的方法
SpringBoot解决ajax跨域,供大家参考,具体内容如下 一.第一种方式 1.编写一个支持跨域请求的 Configuration import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.anno
-
Python的Django应用程序解决AJAX跨域访问问题的方法
引子 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width
-
详解springboot解决CORS跨域的三种方式
目录 一.实现WebMvcConfigurer接口 二.实现filter过滤器方式 三.注解@CrossOrigin 四.实战 五.cookie的跨域 一.实现WebMvcConfigurer接口 @Configuration public class WebConfig implements WebMvcConfigurer { /** * 添加跨域支持 */ @Override public void addCorsMappings(CorsRegistry registry) { // 允
-
JSONP跨域GET请求解决Ajax跨域访问问题
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要
-
浅析JSONP解决Ajax跨域访问问题的思路详解
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要
-
深入浅析Jsonp解决ajax跨域问题
一.介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力问题吧,自己经过很多尝试,所以总结了一下,终究还是弄懂了皮毛.注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax. 1.同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(JavaS
-
使用Nginx 反向代理来避免 ajax 跨域请求的方法
服务器上 nginx + tomcat ,其中 nginx 监听 80 端口, tomcat 监听 8080 端口. 因为对前端不熟悉,以为用 ajax 就可以不需要 callback ,然而前端的同学说不跨域的情况下才不需要 callback ,让我在返回的 json 里加上.可是我刚刚学会了最基本的 spring-mvc 用法,根本不知道怎么加上 callback 网上到时找到一些可行的代码,差不多这个样子: @RequestMapping(method=RequestMethod.GET,
-
完美解决ajax跨域请求下parsererror的错误
ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLHttpRequest.status=200 (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parseerror的错误. 出现这个错误,大都是不良书写习惯,或者语法不当造成的. 关于ajax的错误,请使用: error:function(XMLHttpRequest, textStatus, errorThro
-
解决ajax跨域请求数据cookie丢失问题
前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: { withCredentials: true }, crossDomain: true, $.ajax({ type: postType, url: url, data: postData || '', xhrFields: { withCredentials: tru
-
基于SpringBoot解决CORS跨域的问题(@CrossOrigin)
一.关于跨域介绍 在前后分离的架构下,跨域问题难免会遇见比如,站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg. 网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源. 出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求. 例如,XMLHttpRequest和Fetch API遵循同源策略. 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非