Springboot跨域 ajax jsonp請求


SpringBoot配置:

<dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
</dependency>

 

@SuppressWarnings("deprecation")
@Configuration
public class CorsFilter extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedHeaders()
                // 允許使用的請求方法,以逗號隔開
                .allowedMethods("*")
                // 表示接受任意域名請求
                .allowedOrigins("*")
                // 表示是否允許發送Cookie。默認情況下Cookie不包括在CORS請求中。當設為true時表示服務器明確許可,Cookie可以包含在請求中一起發送給服務器。
                .allowCredentials(true)
                // 緩存此次請求的秒數。在這個時間范圍內,所有同類型的請求都將不再發送預檢請求而是直接使用此次返回的頭作為判斷依據,非常有用,大幅優化請求次數
                .maxAge(3600);
    }
}
@SpringBootApplication
@ComponentScan
public class CorsDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(CorsDemoApplication.class, args);
    }

}
@Controller
@RequestMapping("/cors")
public class CorsController {

    @RequestMapping(value="/index")
    @ResponseBody
    public String corsTest(HttpServletRequest request,String name,String age) {
        String jsonpCallback = request.getParameter("callback");
        Map<String, Object> map=new HashMap<>();
        map.put("name",name);
        map.put("age",age);
        map.put("date",new Date());
        return jsonpCallback + "(" + JSON.toJSONString(map) + ")";
    } 
}

Ajax請求:

          $.ajax({
                            url:"http://62.234.65.61:8090/cors/index",
                            type:"POST",
                            data:{
                                 "name":"amdin",
                                 "age":20
                            },
                            dataType:"jsonp",
                            /* jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認為:callback)
                            jsonpCallback:"callback",//自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名,也可以寫"?",jQuery會自動為你處理數據 */
                            success: function(data){
                                 console.log("res:"+JSON.stringify(data));
                            },
                            error: function(){
                                 alert('fail');
                            }
                        });

總結:

測試1:前台+后台本地運行,IP相同端口不同   測試結果:res:{"date":1560913652938,"name":"amdin","age":"20"}

測試2:前段本地運行,后台放到騰訊雲服務器,測試結果:res:{"date":1560913652938,"name":"amdin","age":"20"}

都能完成跨域請求及成功獲取返回值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM