JSONP与CORS实现跨域

JSONP实现跨域

背景分析

浏览器出于安全考虑,制定了同源策略。(位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通)

概述

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题

原理

利用javaScript中的src属性实现远程数据的获取(src不受同源限制), 获取的数据是一个JS对象,由浏览器负责解析JS。

实现

页面请求,JS代码。





JSONP测试




 

JSON跨域请求测试

服务器处理

package com.jt.web.controller;
import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/web/")
public class JSONPController {
    /**
 * 完成jsonp跨域访问
 * url: http://manage.jt.com/web/testJSONP?callback=jQuery111104808002072562081_1610519800035&_=1610519800036
 * 参数:callback=jQuxxxx
 * 返回值:callback(JSON)
 */
 public String jsonp(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(101l).setItemDesc("跨域访问");
        String json = ObjectMapperUtil.toJson(itemDesc);
        return callback+"("+json+")";
    }
    /**
 * * 关于JSONPObject的说明,主要需要自己对json类型数据进行转换.
 */ @RequestMapping("testJSONP")
    public JSONPObject jsonp1(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(101l).setItemDesc("跨域访问");
        return new JSONPObject(callback, itemDesc);
    }
}

CORS方式

跨域资源共享(英语:Cross-origin resource sharing,缩写:CORS),用于让网页的受限资源能够被其他域名的页面访问的一种机制。(实现跨域),CORS通过在响应头中标识允许跨域的网址.之后同源策略基于安全性的规范予以放行的一种跨域访问方式.
说明:需要在服务器中添加允许访问的标识即可.

package com.jt.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class COUSConfig implements WebMvcConfigurer {
    @Override
 public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//什么样的请求允许跨域
 .allowedOrigins("http://www.jt.com","*")//允许通过的路径
 .allowedMethods("*")//允许什么样的请求方式
 .allowCredentials(true)//是否允许携带cookie
 .maxAge(10*60);//设置跨域通信允许最大时长,默认为30*60s
 }
}

你可能感兴趣的