关于上传文件的跨域问题
在进行新框架开发的过程中,需要自定义页面组件实现脱离表单的文件(图片)上传,考虑过wex5自带的attachmentsimple的自定义写法很难受,就改用了第三方插件webuploader来实现选择文件后调用服务端的上传文件接口实现自动上传。
中间遇到过跨域问题,即服务端所在接口域名与插件包(前端)不在同一域名下,但是由于格式是文件,所以必须采用post传输方式
解决方法:
利用CORS实现POST方式跨域请求数据
CORS全名Cross-Origin Resource Sharing,顾名思义:跨域分享资源,这是W3C制定的跨站资源分享标准。
目前包括IE10+、chrome、safari、FF都提供了XMLHttpRequest对象对该标准的支持,在更老的IE8中则提供了xDomainRequest对象,部分实现了该标准;
在利用XMLHttpRequest对象发POST请求前会发一个options嗅探来确定是否有跨域请求的权限;同时在header头上带上Origin信息来指示来源网站信息,服务器响应时需要带上Access-Control-Allow-Origin头的值是否和Origin信息相匹配。
header("Access-Control-Allow-Origin: http://localhost"); // *为全部域名
CORS的缺点是你必须能控制服务器端的权限,允许你跨域访问
设置CORS实现跨域请求
一、使用php代码实现(写在接口开始位置)
$request_method = $_SERVER['REQUEST_METHOD'];
if ($request_method === 'OPTIONS') {
header('Access-Control-Allow-Origin:'.$origin);
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET, POST, OPTIONS');
header('Access-Control-Max-Age:1728000');
header('Content-Type:text/plain charset=UTF-8');
header('Content-Length: 0',true);
header('status: 204');
header('HTTP/1.0 204 No Content');
}
if ($request_method === 'POST') {
header('Access-Control-Allow-Origin:'.$origin);
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET, POST, OPTIONS');
}
if ($request_method === 'GET') {
header('Access-Control-Allow-Origin:'.$origin);
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET, POST, OPTIONS');
}
二、使用nginx配置实现
location / {
set $origin '*';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $origin;
#
# Om nom nom cookies
#
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' $origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' $origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
转载于:https://www.cnblogs.com/aanruo/p/6909957.html
关于上传文件的跨域问题相关推荐
- form上传文件以及跨域异步上传
要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 关于跨域上传文件: 跨域上传文件总会报错,即使服务器端设置了header('Access- ...
- SWFUpload上传文件组件,跨域上传文件
转自: http://zhaowenbinmail.blog.163.com/blog/static/3908086201042743942935/ 解决SWFUpload上传文件组件使用时报告204 ...
- 上传文件的跨域处理(转)
(文章转自:http://blog.robotercoding.com/?p=62) 为了减轻主服务器的负担,希望把图片的处理单独拿出来,由图片服务器来处理图片上传,浏览等操作.图片上传使用了ajax ...
- 绕过网关访问图片上传并解决跨域问题
绕过网关 图片上传是文件的传输,如果也经过Zuul网关的代理,文件就会经过多次网路传输,造成不必要的网络负担.在高并发时,可能导致网络阻塞,Zuul网关不可用.这样我们的整个系统就瘫痪了. 所以,我们 ...
- jfinal jboot 拦截器过滤文件上传请求 和 跨域解决方法
public class PublicInterceptor implements Interceptor {@Overridepublic void intercept(Invocation inv ...
- 解决H5的a标签的download属性下载service上的文件/图片出现跨域问题
1.通过点击下载多媒体文件(图片/视频/文件等) 最简单的方式: <a href='url' download="filename.ext">下载文件</a> ...
- 阿里云OSS | 对象存储服务快速入门 | 参考官方文档实现使用JavaSDK上传文件 | 本地上传与web上传案例
参考文档 : 点击查看 文章目录 运行环境 一.OSS相关概念 1.1 Storage Class 存储类型 1.2 Bucket 存储空间 1.3 Object 对象 1.4 Region 地域 1 ...
- WebUploader上传文件夹的三种解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解
这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白 这个跨域异步上传功能我们借助了Jquery.for ...
最新文章
- PHP+MySQL手工注入问题及修复
- 很高兴加入 英文_少和外国人说quot;You look youngquot;,她们可能会不高兴!
- Hibernate3的配置参数汇总
- LUA表与函数的深入理解
- 对用户密码进行md5加密的代码实现
- NLP 命名实体识别
- 为什么要进行透明计算和透明计算是什么
- 使用Speedment 3.0.17及更高版本简化了事务
- E20180219-hm-xa
- Taro+react开发(27)别加view
- linux+有趣的指令,6个有趣的Linux命令(乐趣终端) - 第二部分
- 使用mongoose来创建嵌入式websocket客户端和http客户端
- python编写2的n次方_2的n次方(python计算2的n次方的算法)
- 使用管理员权限强制删除文件夹
- 2012考研数学二第(11)题——链式法则偏导数
- 使用kubeadm安装kuberneters
- 未转变者服务器组队教程,未转变者联机服务器创建方法_未转变者 联机服务器怎么创建_快吧单机游戏...
- 读书笔记——WebKit技术内幕 WebKit架构和模块
- Stay hungry. Stay foolish.
- Fireshot——很棒的的网页截图扩展