ajax跨域post请求

为什么会出现跨域问题？

首先我们要先了解一个概念--同源策略。同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。目的是出于安全考虑，防止js脚本随意调用其他网站的资源。

一.跨域请求,不需jsonp的post跨域请求(Springboot)

问题描述

先把前后台的代码贴出来

后台controller

//query all user
    @ResponseBody
    @RequestMapping(value = "/getAllUser",method= RequestMethod.POST)
    public List<User> getAllUser(@RequestBody Map<String,Object> reqMap){
        return userService.findAllUser(reqMap);
    }

前台js

$.ajax({

url:'http://localhost:8080/user/getAllUser',

data:{pageNum:3, pageSize:3},

type:'post',

dataType:'json',

contentType: "application/json",

success:function(data){

alert("success");

console.log(data);

 

},

error:function(reason){

console.log(reason)

}

});

显示如下错误，经查询后发现是跨域导致的错误

 

后台改进

在Application启动类中注册WebMvcConfigurer

@Bean

public WebMvcConfigurer webMvcConfigurer() {

return new WebMvcConfigurerAdapter() {

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/**").allowedOrigins("*");

}

};

}

重新启动项目后浏览器报400错误

  

经过研究后发现是Json格式错误，ajax请求的是json格式，但是ajax发送过去的参数显然不是json格式，所以我们还需要将参数格式化为json格式然后传到后台。使用JOSN.stringify方法

改正后的后台代码

$.ajax({

url:'http://localhost:8080/user/getAllUser',

data:JSON.stringify({pageNum:3, pageSize:3}),

type:'post',

dataType:'json',

contentType: "application/json",

success:function(data){

alert("success");

console.log(data);

},

error:function(reason){

console.log(reason)

}

});

再次刷新页面

二.跨域请求,需jsonp的post跨域请求

ajax的post请求如何让web或接口的方法支持跨域（）

只是方法，如果是服务器或者整个web，找其他资料

只需要加入

response.setHeader("Access-Control-Allow-Origin", "*");

即可

@ResponseBody

@RequestMapping(value="login1", method=RequestMethod.GET, produces="application/json;charset=UTF-8")

public String login1(HttpServletRequest request,HttpServletResponse response) throws Exception{

response.setHeader("Access-Control-Allow-Origin", "*");

@ResponseBody

@RequestMapping(value="login", method=RequestMethod.POST, produces="application/json;charset=UTF-8")

public String login(@RequestBody String requestJson,HttpServletRequest request,HttpServletResponse response) throws Exception{

//设置跨域请求

response.setHeader("Access-Control-Allow-Origin", "*");

通过浏览器请求get

获取通过360浏览器的console请求post

 

var data={

thirdType:3,

openId:"a970a9778",

userName:"22288",

headImage:"http://www.baidu.com/image.png"

}

$.ajax({

type:"POST",

dataType:"json",

url:"http://192.168.1.5:8080/ryqp/login.shtml",

data:data,

success: function(msg){

if(msg.code == "APP.000"){

alert('删除成功');

}else {

alert("删除失败!");

}

},

error: function (msg) {

alert("删除失败!");

}

});