2

跨域问题经常需要面对,前端需要做的比较直接
要么选择ajax异步提交,XML或者jsonp,要么表单提交

jsonp基本可以搞定大部分跨域问题,但问题也比较明显,只能通过get方式提交
并且jsonp是通过把参数拼到URL上提交请求的
但是所有浏览器有URL长度限制,不同浏览器长度限制不一样
当出现要提交大段落内容的时候,比如说文章,用jsonp的话超出长度只能分割提交
很麻烦,而且说到底对安全性有些影响
而且axiox现在也不支持jsonp了,虽然有方式解决

尤其是图片类的资源上传,无法很好的用jsonp之类的方法实现

需要图片上传跨域的场景

当然可以不跨域最好不跨域,但是目前大部分项目都已经前后端分离了
静态资源和接口分别是不同的域名或者二级域名,这样就涉及到了跨域
如果是资源上传,跨域的时候需要后端Access-Control-Allow-Origin和当前请求的Origin一样,不能设置为*

php解决方法

如果是传统数据请求,那后端直接将Access-Control-Allow-Origin设置为*就好

 header('Access-Control-Allow-Origin:*');

但图片之类的资源上传Origin需要跟Access-Control-Allow-Origin的值一样
如果设置Access-Control-Allow-Origin跟当前的Origin一样的话就限制死了能上传的域名只有一个
要有其他域名需要调用这个接口的话就会被禁止

所以最好的方法就是限定能够调用这个接口的域名列表,也提高了一定的安全性

做法就是先获取当前请求的Origin,如果在允许访问的域名列表里
就将Access-Control-Allow-Origin的值设置为当前请求的Origin

$originList = [
    'http://127.0.0.1',
    'http://www.linkvall.cn',
    'http://mobile.linkvall.cn',
];
if(in_array($_SERVER['HTTP_ORIGIN'], $originList)){
    header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN']);
    header("Access-Control-Allow-Credentials: true");
    header('Access-Control-Allow-Headers:x-requested-with,content-type');
    header("Access-Control-Allow-Methods: POST,GET,OPTIONS");
}

这样就能控制可以跨域的域名了,图片类资源就能像同域一样开心的上传上来了
post方式跨域提交同样适用


EEEEEZ
39 声望0 粉丝