JS跨域解决方案
一、 概述
受浏览器同源策略影响, JS默认是不能跨域的。
同源策略:简单来讲同源策略就是浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,禁止不同域之间的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
@SpringBootApplication
public class Demo2Application {
public static void main(String[] args) {
SpringApplication.run(Demo2Application.class, args);
}
@Bean
public FilterRegistrationBean createFilterRegistrationBean(){
FilterRegistrationBean bean = new FilterRegistrationBean();
bean.setFilter(new CorsFilter());
bean.addUrlPatterns("/*");
bean.setName("corsFilter");
return bean;
}
}
三、JSONP
原理 : 通过html中的 <script src="..."></script> 来完成跨域操作 ;
请求数据 :
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;
}
原理
CORS 与 JSONP :
JSONP : <script src="....">
优点 : 不受浏览器版本影响 ;
缺点 : 只支持GET方式
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));
}
})
}