AJAX文件上传跨域问题

浏览:1338次阅读
没有评论

提醒:本文最后更新于 2021-09-26 18:36,文中所关联的信息可能已发生改变,请知悉!

Ajax 文件上传格式是文件,所以必须采用 post 传输方式

AJAX 文件上传跨域问题

 

解决方法:

利用 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';

}

}

 

 转至:http://www.cnblogs.com/aanruo/p/6909957.html
正文完
 0
包子
版权声明:本站原创文章,由 包子 于2017-10-19发表,共计2574字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)