1 JSONP réalise le cross-domain
Description JSONP
JSONP (JSON with Padding) est un "mode d'utilisation" de JSON, qui peut être utilisé pour résoudre le problème de l'accès aux données interdomaines dans les navigateurs traditionnels. En raison de la politique de même origine, de manière générale, les pages Web situées sur server1.example.com ne peuvent pas communiquer avec des serveurs autres que server1.example.com, et la technologie JSONP peut résoudre ce problème.
Description du principe JSONP
Étapes:
1) .Utilisez l'attribut src dans javaScript pour obtenir une acquisition de données à distance.Les données acquises sont un objet JS et le navigateur est responsable de l'analyse du 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>
Optimisation JSONP
1). Le nom de la fonction doit être passé dynamiquement dans le passé.
2). L'ajax régulier peut-il être utilisé pour implémenter des appels JSONP?
3). Une fonction de rappel peut-elle être générée dynamiquement.
Cas d'introduction:
code de modèle 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);
}
});
})
Code de modèle de contrôleur (personnalisé):
/**
* 完成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 + ")";
}
L'API avancée encapsule automatiquement 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 réalise le cross-domain
Introduction à CORS
Partage de ressources inter-origines (anglais: partage de ressources inter-origines, abréviation: CORS), de sorte que des ressources limitées pour la page Web soient accessibles par un mécanisme d'autres noms de domaine. (Implémentation interdomaine), CORS autorise les URL interdomaines en identifiant dans l'en-tête de la réponse. Plus tard, la stratégie de même origine est basée sur des spécifications de sécurité pour libérer une méthode d'accès interdomaine.
Remarque: il est nécessaire d'ajouter un logo qui permet d'accéder au serveur. can.
Cas d'introduction
Modifier la classe de configuration 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
}
}
Visite d'effet de page
Résumé: Après avoir utilisé la technologie CORS, vous pouvez directement utiliser le format de données json ordinaire pour le cross-domain.