面试冲刺————JS跨域解决方案

****# ****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( $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.代理。
在代理配置响应头