ajax 跨域 springboot
CORS 定义
Cross-Origin Resource Sharing（CORS）跨来源资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。
CORS 对比 JSONP
都能解决 Ajax直接请求普通文件存在跨域无权限访问的问题
- JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求
- 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理
- JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS
方法一:Controller增加spring注解:
@CrossOrigin
这里虽然指SpringBoot但是SpringMVC也是一样的，要求在Spring4.2及以上的版本
方法二:使用filter拦截器:
Application增加FilterRegistrationBean的@Bean:
package com.xc.boot;
import com.xc.boot.filter.CrosFilter;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
@SpringBootApplication
public class BootApplication { public static void main(String[] args) {
SpringApplication.run(BootApplication.class, args);
} @Bean
public FilterRegistrationBean registerFilter(){
FilterRegistrationBean bean = new FilterRegistrationBean();
bean.addUrlPatterns("/*");
bean.setFilter(new CrosFilter());
return bean;
}
}
创建CrosFilter拦截器类:
package com.xc.boot.filter;
import org.springframework.util.StringUtils;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class CrosFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException { } @Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletResponse res = (HttpServletResponse) response;
HttpServletRequest req = (HttpServletRequest) request; String origin = req.getHeader("Origin");
if (!StringUtils.isEmpty(origin)) {
System.out.println("origin:" + origin);
res.addHeader("Access-Control-Allow-Origin", origin);//允许其他域名访问
} String headers = req.getHeader("Access-Control-Request-Headers");
if (!StringUtils.isEmpty(headers)) {
res.addHeader("Access-Control-Allow-Headers", headers);//允许的请求头字段
} res.addHeader("Access-Control-Allow-Methods", "*");//允许的请求类型
res.addHeader("Access-Control-Max-Age", "1800");//预检结果缓存时间
res.addHeader("Access-Control-Allow-Credentials", "true");//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
chain.doFilter(request, response);
} @Override
public void destroy() { }
}
创建测试controler类:
package com.xc.boot.controller;
import com.xc.boot.common.ResultBean;
import com.xc.boot.entity.User;
import org.springframework.web.bind.annotation.*;
import java.util.Date;
@RestController
@RequestMapping("ajax")
public class AjaxController {
@RequestMapping("get1")
public ResultBean index() {
System.out.println("get1:" + new Date());
return new ResultBean("get1 ok");
} @PostMapping("/postJson")
public ResultBean postJson(@RequestBody User user) {
System.out.println("postJson:" + new Date());
return new ResultBean("postJson " + user.getName());
} @GetMapping("/getCookie")
public ResultBean getCookie(@CookieValue(value = "cookie1") String cookie1) {
System.out.println("getCookie:" + new Date());
return new ResultBean("getCookie " + cookie1);
} @GetMapping("/getHeader")
public ResultBean getHeader(@RequestHeader(value = "x-header1") String header1, @RequestHeader(value = "x-header2") String header2) {
System.out.println("getHeader:" + new Date());
return new ResultBean("getHeader " + header1 + " " + header2);
}
}
创建测试ajax:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX跨越完全讲解</title>
<script src="jquery-1.11.3.js"></script>
<link rel="stylesheet" type="text/css" href="jasmine-2.8.0/jasmine.css">
<script src="jasmine-2.8.0/jasmine.js"></script>
<script src="jasmine-2.8.0/jasmine-html.js"></script>
<script src="jasmine-2.8.0/boot.js"></script>
</head>
<body>
<script>
function get1() {
$.getJSON("http://localhost:8082/boot/ajax/get1").then(function(result) {
console.log(result);
});
} // 每一个测试用例的超时时间
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
// 请求的接口的前缀
var base = "http://localhost:8082/boot/ajax";
//测试模块
describe("晓风轻-ajax跨越完全讲解", function() {
// 测试方法
it("get1请求", function(done) {
// 服务器返回的结果
var result;
$.getJSON(base + "/get1").then(function(jsonObj) {
result = jsonObj;
});
// 由于是异步请求，需要使用setTimeout来校验
setTimeout(function() {
expect(result).toEqual({
"data" : "get1 ok"
});
// 校验完成，通知jasmine框架
done();
}, 100);
}); // 测试方法
/*it("jsonp请求", function(done) {
// 服务器返回的结果
var result;
$.ajax({
url: base +"/get1",
dataType: "jsonp",
jsonp: "callback2",
cache:true,
success: function(json){
result = json;
}
});
// 由于是异步请求，需要使用setTimeout来校验
setTimeout(function() {
expect(result).toEqual({
"data" : "get1 ok"
});
// 校验完成，通知jasmine框架
done();
}, 100);
});*/ it("postJson请求", function(done) {
// 服务器返回的结果
var result;
$.ajax({
type : "post",
url: base + "/postJson",
contentType : "application/json;charset=utf-8",
data: JSON.stringify({name: "xc"}),
success: function(json){
result = json;
}
});
// 由于是异步请求，需要使用setTimeout来校验
setTimeout(function() {
expect(result).toEqual({
"data" : "postJson xc"
});
// 校验完成，通知jasmine框架
done();
}, 100);
}); it("getCookie请求", function(done) {
// 服务器返回的结果
var result;
$.ajax({
type : "get",
url: base + "/getCookie",
xhrFields:{
withCredentials:true
},
success: function(json){
result = json;
}
});
// 由于是异步请求，需要使用setTimeout来校验
setTimeout(function() {
expect(result).toEqual({
"data" : "getCookie xc"
});
// 校验完成，通知jasmine框架
done();
}, 100);
}); it("getHeader请求", function(done) {
// 服务器返回的结果
var result;
$.ajax({
type : "get",
url: base + "/getHeader",
headers:{
"x-header1" : "AAA"
},
beforeSend: function(xhr){
xhr.setRequestHeader("x-header2","BBB")
},
success: function(json){
result = json;
}
});
// 由于是异步请求，需要使用setTimeout来校验
setTimeout(function() {
expect(result).toEqual({
"data" : "getHeader AAA BBB"
});
// 校验完成，通知jasmine框架
done();
}, 100);
}); });
</script>
</body>
</html>
ajax 跨域 springboot的更多相关文章
- ajax跨域-springboot
package com.xxxx.xx.service.configuration; import org.springframework.context.annotation.Bean; impor ...
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 （JSONP和CORS实现Ajax跨域的原理）
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 （总结）
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- Ajax跨域访问wcf服务中所遇到的问题总结。
工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Ajax跨域：Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
随机推荐
- 如何在linux下使用sudo命令不用输入密码
用过linux的小伙伴可能都知道,每次使用sudo的时候需要输入密码,这样很耽误事,那么接下来我会教大家如何去设置 一.1.输入su root进入root模式 2.输入visudo会打开/etc/su ...
- Linux中 SonarQube代码质量管理平台以及C++插件安装
SonarQube是管理代码质量一个开源平台,可以快速的定位代码中潜在的或者明显的错误. SonarQube安装 1.环境准备 (1)sonarQube 下载地址https://www.sonarqu ...
- c#二进制移位运算符 "<<"及">>"，"&","|","^"
移位运算符 & :按位与,其实与&&逻辑运算符有一致的地方: | :按位或,同样与||有类似的地方. ~:按位取反 ^:按位异或 <<:左移运算符 >> ...
- 5.2Python数据处理篇之Sympy系列(二)---Sympy的基本操作
目录 目录 前言 (一)符号的初始化与输出设置-symbol() symbols() latex() 1.作用: 2.操作: (二)替换符号-subs(old,new) 1.说明: 2.源代码: 3. ...
- 如何提高 windows 的使用效率？--巧用运行命令
windows 操作系统可以使用 win+R 运行一些命令执行任务,好处是:高效.快速.准确. 启动程序 将程序 chrome 写入以下注册表中, SOFTWARE\Microsoft\Windows ...
- echarts柱状图点击阴影部分触发事件
在很多时候我们的柱状图分布不均匀,有些柱高可能会很小,如果通过myChart.on('click',function(){})来促发事件,可能在点击的时候不好操作,因为这个click事件是绑定在各个s ...
- 堡垒机paramiko模块
paramiko简介: 模拟ssh客户端,使用ssh协议,基于sftp协议等做批量管理.例如处理用ssh登陆一千台机器执行同一个命令,或下载上传文件等需求 基于用户名密码登录执行命令: import ...
- 0106笔记--vc2012 打印堆栈
清空icound 菜单 调试-->选项和设置--->常规--->启用调试助手 要把在未经处理的异常上展开调用堆栈选中: 然后就有
- 替换空格[by Python]
题目: 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 1.使用python自带的repla ...
- H5页面长按导致app崩溃问题解决
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 最近用H5页面做了个安卓的项目,但是在H5页面中长按文字内容,会导致APP崩溃掉... ...