Implementación entre dominios del código y las notas de la plantilla JSONP / CORS

1 JSONP realiza dominios cruzados

Descripción JSONP

JSONP (JSON con relleno) es un "modo de uso" de JSON, que se puede utilizar para resolver el problema del acceso a datos entre dominios en los navegadores convencionales. Debido a la política del mismo origen, en términos generales, las páginas web ubicadas en server1.example.com no pueden comunicarse con servidores que no sean server1.example.com, y la tecnología JSONP puede resolver este problema.

Descripción del principio JSONP

Pasos:
1) Utilice el atributo src en javaScript para lograr la adquisición remota de datos Los datos adquiridos son un objeto JS y el navegador es responsable de analizar el JS.

<script type="text/javascript" src="http://manage.jt.com/test.json"></script>

2).自定义回调函数.
	<script type="text/javascript">
	/*JS是解释执行的语言  */
	/*定义回调函数  */
	function hello(data){
    
    
		alert(data.name);
	}
	</script>

Optimización JSONP

1) El nombre de la función debe pasarse dinámicamente en el pasado
2) ¿Se puede usar el ajax regular para implementar llamadas JSONP?
3) ¿Se puede generar dinámicamente una función de devolución de llamada?

Caso introductorio:

código de plantilla js

$(function(){
    
    
		alert("测试访问开始!!!!!")
		$.ajax({
    
    
			url:"http://manage.jt.com/web/testJSONP",
			type:"get",				//jsonp只能支持get请求
			dataType:"jsonp",       //dataType表示返回值类型
			//jsonp: "callback",    //指定参数名称
			//jsonpCallback: "hello",  //指定回调函数名称
			success:function (data){
    
       //data经过jQuery封装返回就是json串
				alert(data.itemId);
				alert(data.itemDesc);
				//转化为字符串使用
				//var obj = eval("("+data+")");
				//alert(obj.name);
			}	
		});	
	})

---

Código de plantilla de controlador (personalizado):

  /**
     * 完成JSONP的跨域访问
     * url: http://manage.jt.com/web/testJSONP?callback=jQuery11110866571904203129_1607672014673&_=1607672014674
     * 参数:callback=jQuxxxxxx
     * 返回值:callback(JSON)
     */
	@RequestMapping("/web/testJSON")
    public String jsonp(String callback) {
    
    
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(101L).setItemDesc("跨域访问");
        String json = ObjectMapperUtil.toJSON(itemDesc);
        return callback + "(" + json + ")";
    }

La API avanzada encapsula automáticamente JSONP:

import com.fasterxml.jackson.databind.util.JSONPObject;

    /**
     * JSONPObject 对象
     * */
    @RequestMapping("/web/testJSONP")
    public JSONPObject jsonp2(String callback){
    
    
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(101L).setItemDesc("跨域访问");
        return new JSONPObject(callback,itemDesc);
    }

2 CORS se da cuenta de dominios cruzados

Introducción a CORS

Intercambio de recursos de origen cruzado (inglés: intercambio de recursos de origen cruzado, abreviatura: CORS), de modo que se pueda acceder a recursos limitados para la página web mediante un mecanismo de otros nombres de dominio. (Implementar dominios cruzados), CORS permite URL de dominios cruzados identificándose en el encabezado de la respuesta. Posteriormente, la política del mismo origen se basa en especificaciones de seguridad para lanzar un método de acceso de dominios cruzados.
Nota: Es necesario agregar un logotipo que permite el acceso al servidor. can.

Caso introductorio

Editar la clase de configuración CORS

@Configuration
public class CORSConfig implements WebMvcConfigurer {
    
    

    /**
     *   添加资源共享的策略
     *   参数说明:
     *      1.addMapping()  什么样的请求允许跨域
     *      2.allowedOrigins()  设定允许访问的网址
     *      3.allowCredentials() 是否允许携带cookie
     *
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        registry.addMapping("/**")   // 允许跨域的域名
                .allowedOrigins("*")  // 允许跨域的源
                //如果设置true时,则必须设定允许访问的网址,不可以用*号标识.
                .allowCredentials(false);  // 是否允许携带cookie
                //.maxAge()       30分钟    // 跨域一次成功后多长时间内不再校验是否安全
                //.allowedMethods("*")  GET POST  HEAD
    }
}

Visita de efecto de página

Resumen: después de usar la tecnología CORS, puede usar directamente el formato de datos json ordinario para dominios cruzados.