跨域问题经常需要面对,前端需要做的比较直接
要么选择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方式跨域提交同样适用