1JSONPはクロスドメインを実現します
JSONPの説明
JSONP（JSON with Padding）は、JSONの「使用モード」であり、主流のブラウザーでのクロスドメインデータアクセスの問題を解決するために使用できます。同一生成元ポリシーにより、一般的に、server1.example.comにあるWebページはserver1.example.com以外のサーバーと通信できず、JSONPテクノロジーでこの問題を解決できます。
JSONPの原則の説明
手順：
1）javaScriptのsrc属性を使用して、リモートデータ取得を実現します。取得したデータはJSオブジェクトであり、ブラウザが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>
JSONPの最適化
1）関数名は過去に動的に渡される必要があります
。2）通常のajaxを使用してJSONP呼び出しを実装
できますか。3）コールバック関数を動的に生成できますか。
導入事例：
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);
}
});
})
コントローラーテンプレートコード（カスタム）：
/**
* 完成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 + ")";
}
Advanced APIは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);
}
2CORSはクロスドメインを実現します
CORSの概要
クロスオリジンリソースシェアリング（英語：クロスオリジンリソースシェアリング、略語：CORS）。これにより、Webページの限られたリソースに他のドメイン名のメカニズムでアクセスできます。（クロスドメインを実装）、CORSは応答ヘッダーで識別することによりクロスドメインURLを許可します。後で、同一生成元ポリシーはセキュリティ仕様に基づいてクロスドメインアクセス方法をリリースします。
注：ロゴを追加する必要があります。サーバーへのアクセスを許可します。
紹介ケース
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
}
}
ページ効果訪問
概要：CORSテクノロジーを使用した後、クロスドメインに通常のjsonデータ形式を直接使用できます。