postman不跨域本地开发跨域_为什么postman调接口不会跨域而浏览器会

为什么postman调接口不会跨域而浏览器会？

都在说跨域，为什么postman能访问接口，而浏览器就不行呢？这里需要理解什么是跨域，跨域是指的当前资源访问其他资源时发起的http请求由于安全原因(由于同源策略，域名、协议。端口中只要有一个不同就不同源)，浏览器限制了这些请求的正常访问，特别需要注意的是这些发生在浏览器中。而通过postman等工具调用接口时，只是简单的访问一个资源，并不存在资源的相互访问。

知识预热

回调函数

这里就不细讲回调函数啦，相信各位都能理解，用一个案例来说一下。

“服务器”和“客户端”初次相识，相谈甚欢，客户端希望服务器把一个叫json的东西给它，”服务器“：你先忙着，我弄好了发给你，把你电话号码(回调函数)给我。

跨域中的预检请求即是指浏览器在真正发送请求前，会先发送一个Options请求嗅探，请求成功后才会发送真实的请求。问答三连：

为什么需要发送预检请求？是因为触发了浏览器的安全校验。

为什么请求会触发安全校验？因为当前请求是一个"复杂请求"。

为什么我的请求是“复杂的”?见下面解释

复杂和简单请求

简单请求：请求方法是GET/HEAD/POST，并且contentType为text/plain、application/x-www-form-urlencoded、multipart/form-data。

不满足上述条件的视为复杂请求，开发中我们常触发这个条件大多因为我们的请求的contentType设置的是application/json导致的。

简单请求如果设置了Authentication认证header也会让请求“升级”为复杂请求。

理解spring提供的@CrossOrigin注解

@CrossOrigin(maxAge = 3600,origins = "*")

@CrossOrigin可以放在某个方法上，或者放在类上，这样对类中所有请求方法有效，指定能访问的域集合，即是设置Access-Control-Allow-Origin。

maxAge 属性指定了预检请求的缓存时间，单位是秒。对应http的Access-Control-Max-Age属性

缓存的内容为：Access-Control-Allow-Methods和Access-Control-Allow-Headers 提供的信息。

理解使用jsonp解决跨域问题

上面简单介绍了回调函数，jsonp是如何解决跨域的呢？其实就是利用了一个特性，html页面中引入不同域的js是不会引发跨域的，下面的案例中，我引入了一个在线的query地址，并且在script标签的src写上了后端的接口地址，从前端的角度我们可以想象成只是简单请求一个js文件，js文件的内容是一个函数调用，刚好浏览器本地定义了这个函数，所以请求完毕，就会对这个函数发起调用，当然前后端的函数名需要一样，这就是我们说的回调函数的机制。

前端

init...

//定义回调函数，相当于上述说的“电话号码”

function myCallback(res){

alert(JSON.stringify(res));

}

--------------------------------------------------------------------------------

后端：

/**

* 返回使用回调函数包裹的json

* @return

@RequestMapping("/infoWithCallBack")

public String info(){

JSONObject map = new JSONObject();

map.put("msg","请求成功!");

map.put("code","0000");

map.put("data","获取到后端数据!");

String str = map.toString();

return "myCallback(" + str + ")";

}

上面的例子在正常返回的json前面包裹了一个函数名，为的是能让浏览器执行，如果不采用jsonp的方式，而是后端设置Access-Control-Allow-Origin，则请求到的不是一个标准json,所以我们需要改造一下，兼容两种方式。

$(function(){

$.ajax({

type:'POST'

,dataType:"jsonp"

,url:'http://localhost:9992/cors/info3'

,data:{}

,contentType:'application/json;charset=utf-8'

//,jsonp:"callback" //指定回调函数的名字。一般不改这个，默认callback

//,jsonpCallback:"myCallback" //手动执行发送给服务器的callback参数名，否则由jquery自动帮我们生成，类似jQuery17207352806672191685_1544278219377

,success:function(data){

debugger;

alert("ajax: "+JSON.stringify(data));

}

});

}

--------------------------------------------------------------------------------

/**

* 3.兼容jsonp和普通json请求

* @return

@RequestMapping("/info3")

public String info3(@RequestParam(name="callback",required = false) String callBack){

JSONObject map = new JSONObject();

map.put("msg","请求成功!");

map.put("code","0000");

map.put("data","获取到后端数据!");

String result = map.toString();

if(!StringUtils.isEmpty(callBack)){

//如果是json请求，则包裹上回调函数

return callBack + "(" + result + ")";

}

return result;

}

其他遇到的问题

Uncaught SyntaxError: Unexpected token :

在解决跨域时，遇到这种错误，一般是前端没有设置回调函数，而后端返回了被回调函数包裹的json.

info?callback=callback:1 Uncaught ReferenceError: callback is not defined

at info?callback=callback:1

本文分享 CSDN - 独行侠梦。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。