JS跨域解决方案

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));
		}
	})
}