****# ****JS跨域解决方案
概述
跨域:
域名/主机/IP
协议
端口号
受浏览器同源策略影响, ajax默认是不能跨域的。
同源策略:简单来讲同源策略就是浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略,从而限制他们之间如下的交互行为:
1.Cookie、LocalStorage和IndexDB无法读取;
2.DOM无法获得;
3.AJAX请求不能发送。
CORS
1). 在方法上加入响应头信息
@RequestMapping(value="/findUser1")
public Map<String,String> findUser(HttpServletResponse response) throws Exception{
response.setHeader("Access-Control-Allow-Origin","*");
Map<String,String> map = new HashMap<String,String>();
map.put("username", "Tom");
map.put("age", "20");
return map;
}
2). 过滤器实现
定义过滤器
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
httpServletResponse.addHeader("Access-Control-Allow-Origin", "*");
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
springboot 中配置Filter
@Bean
public FilterRegistrationBean createFilterRegistrationBean(){
FilterRegistrationBean bean = new FilterRegistrationBean();
bean.setFilter(new CorsFilter());
bean.addUrlPatterns("/*");
bean.setName(“corsFilter”);
return bean;
}
3). 注解
@CrossOrigin
JSONP
原理 : 通过html中的 来完成跨域操作 ;
请求数据 :
http://localhost:8182/findUser2.action?callback=jQuery111302836203168186435_1562932536172&_=1562932536173
响应数据 :
jQuery111302836203168186435_1562932536172({“age”:“20”,“username”:“Tom”})
前台JS:
jquery
function findUser(){
$.ajax({
url:‘http://localhost:8182/findUser2.action’,
type:‘get’,
dataType:‘jsonp’,
success:function(data){
alert(JSON.stringify(data));
}
})
}
angularJs
var app = angular.module(‘app’,[]);
app.controller(‘myController’,function(
s
c
o
p
e
,
scope,
scope,http){
$scope.findUser = function(){
$http.jsonp(“http://localhost:8182/findUser2.action?callback=JSON_CALLBACK”).success(function(data) {
alert(JSON.stringify(data));
});
}
});
后台代码:
@RequestMapping(value="/findUser2")
public String findUserWithJsonP(String callback) throws Exception{
Map<String,String> map = new HashMap<String,String>();
map.put(“username”, “Tom”);
map.put(“age”, “20”); //{“username”:“Tom”,“age”:“20”}
ObjectMapper objectMapper = new ObjectMapper();
String result = objectMapper.writeValueAsString(map);//{"username":"Tom","age":"20"}
result = callback + "(" + result + ")"; // jquery18230243({"username":"Tom","age":"20"})
return result;
}
原理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcHAXNM4-1584155589998)(6ACF08A320904AE5B1BD4F1775B4C96B)]
CORS 与 JSONP :
JSONP :
CORS : W3C 标准
优点 : 官方的
支持所有的请求方式
缺点 : 受浏览器版本影响
Proxy
Nginx配置
server {
listen 100;
server_name localhost;
location / {
proxy_pass http://localhost:8182/;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods 'GET POST';
}
}
ajax请求
function findUser(){
$.ajax({
url:‘http://localhost:100/findUser1.action’,
type:‘get’,
dataType:‘json’,
success:function(data){
alert(JSON.stringify(data));
}
})
}
image
总结:
1.cors:
添加响应头的信息
(1)直接在方法中添加
(2)配置过滤器
(3)添加注解CrossOrigin
2.jsonp
原理是通用script标签的src属性进行跨域
(1)js js页面定义一个回调方法,发送异步请求时为get请求,类型为jsonp,并携带rollback请求参数
(2)java代码返回数据将返回结果封装结果数据,在结果前添加rollback参数。以及前括号。结果数据后添加后括号。
3.代理。
在代理配置响应头