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

原文地址:https://segmentfault.com/a/1190000016979232

最新文章

  1. selenium如何高亮某元素和操作隐藏的内容
  2. maven2-snapshot快照库和release发布库的应用
  3. error C2275: “XXX”: 将此类型用作表达式非法
  4. 会报编译器警告的Xcode 6.3新特性:Nullability Annotations
  5. ReactNative 踩坑小计
  6. 使用Windbg和SoS扩展调试分析.NET程序
  7. EasyUI-动态添加tab
  8. Codeforces 544E Remembering Strings 状压dp
  9. H Language Blueprint
  10. 转:angular的decorator方法
  11. BZOJ_3685_普通van Emde Boas树_权值线段树
  12. Vue2.5笔记:如何在项目中使用和配置Vue
  13. Loadrunner Vugen参数列表中数据分配方法及更新值的时间9种组合说明及验证
  14. vue系列之过渡效果
  15. cache line 伪共享
  16. 如何查看Apache的连接数和当前连接数
  17. 用threading和Queue模块实现多线程的端口扫描器
  18. python 向qq邮箱发邮件
  19. php中的namespace 命名空间
  20. 利用EasySQLMAIL实现自动填写Excel表格并发送邮件(2)

热门文章

  1. Codeforces 987C. Three displays(o(n^2))
  2. java中三个类别加载器的关系以及各自加载的类的范围
  3. pgpool-II在故障切换过程中是如何选举新主节点的
  4. Caffe 激励层(Activation)分析
  5. eclipse界面更改为黑色
  6. WordPress 自动草稿和文章修定版本
  7. 【jQuery02】点击标题面板显示内容
  8. vue中使用viewerjs
  9. ocrsearch的横屏转竖屏的解决方案
  10. GenIcam标准(四)