POST方式跨域上传文件

JSONP请求有限制: 第一,不能跳出两层, 第二,不支持POST. 

往往解决跨域POST请求的方案是个"古老"方法, 请求同域下的iframe.

服务器端: 

需要附加头信息:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');
返回带有CALLBACK的串:

<script type='text/javascript'>document.domain='xxx.com';Callback({"ret":0,"error":"xxx","data":null});</script>
这里要注意,这里的  document.domain='xxx.com';这个domain是服务器端和前端都要定义的.

前端:

<section>
    <form name="data_upload" action="http://request.com" method="post" target="upload_frame" οnsubmit="return initUpload(this)" enctype="multipart/form-data">
       ......
    <iframe src="" id="upload_frame" name="upload_frame" style="display: none"></iframe>
</section>

<script>

function initUpload(formEle) {
   ....
   document.domain='xxx.com';
   document.forms['data_upload'].submit();
}
</script>




  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-upload 是饿了么前端团队基于 Element UI 组件库开发的文件上传组件。文件上传涉及到跨域问题,主要是因为浏览器的同源策略限制,当上传的目标接口与当前页面的协议、域名或端口不一致时,浏览器会禁止上传操作,这就需要进行跨域处理。 为了解决 el-upload 的跨域问题,可以在服务器端设置相应的 CORS 响应头部信息,允许特定来源的请求进行跨域访问。具体的实现方式可以在服务端设置如下的响应头部信息: ``` Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type ``` 其中,`Access-Control-Allow-Origin` 指定允许跨域访问的来源地址;`Access-Control-Allow-Methods` 指定允许跨域访问的 HTTP 方法;`Access-Control-Allow-Headers` 指定允许跨域访问的请求头部信息。 另外,如果使用的是 Nginx 服务器,可以在 Nginx 配置文件中添加如下代码实现 CORS 处理: ``` location /upload { add_header 'Access-Control-Allow-Origin' 'http://example.com'; add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type'; if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type'; return 200; } } ``` 这里的 `/upload` 是上传文件的接口地址,`http://example.com` 是允许跨域访问的来源地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值