跨域方法
Jsonp:
采用非同源限制标签进行处理请求,我理解的jsonp => json - page
一个json页面
但是它只能处理get的请求,不适用于RESTful 原则
但是它兼容低版本浏览器,
将返回的数据作为指定的回调函数的参数,script标签引入的函数是属于window全局的,所以你只需要在另一个script中指定回调函数,这样就可以获取到服务端数据了
<script>
function test(data) {
console.log(data);
return data;
}
</script>
<script
type="text/javascript"
src="http://127.0.0.1:8090/v1/system/user/getTotal?callback=test"
></script>
cors:
后端服务器直接配置,前端请求会自动添加字段origin(/ˈôrəjən/)
当然这里的字段值可以是指定的url,相当于添加一个白名单
res.header('Access-Control-Allow-Origin', '*')
但是这些只能处理简单请求
只要头部信息只有下面这些,并且只有这三种方法的都是简单请求
(1) 请求方法:
HEAD
GET
POST
(2)HTTP的头信息:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:
application/x-www-form-urlencoded、 multipart/form-data、text/plain
说白了就是,自定义字段,非这三种请求的都会触发复杂请求(就是会触发OPTIONS方法和服务器验证),通过验证才会正式请求服务器。
所以一般还需要设置,可允许更改头部字段以及内容字段
res.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type') // 这个里面需要添加前端发送请求里面添加的自定义字段才行
res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS')
proxy:
webpack里面可以设置devServer proxy属性,使其进行跨域
我所理解的就是直接绕过了服务器,那何来同源限制
网友评论