菜单

关于上传文件的跨域问题,利用CORS实现POST方式跨域请求数据

2019年8月4日 - 4166am金沙下载

CORS全名Cross-Origin Resource
Sharing,顾名思义:跨域分享资源,这是W3C制定的跨站资源分享标准。

在进行新框架开发的过程中,需要自定义页面组件实现脱离表单的文件(图片)上传,考虑过wex5自带的attachmentsimple的自定义写法很难受,就改用了第三方插件webuploader来实现选择文件后调用服务端的上传文件接口实现自动上传。

server {

目前包括IE10+、chrome、safari、FF都提供了XMLHttpRequest对象对该标准的支持,在更老的IE8中则提供了xDomainRequest对象,部分实现了该标准;

中间遇到过跨域问题,即服务端所在接口域名与插件包(前端)不在同一域名下,但是由于格式是文件,所以必须采用post传输方式

listen 5000;

下面是创建request对象的代码:

解决方法:

server_name localhost testDemo;

var url = ” /1.php”;

利用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: “); // *为全部域名

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’;
 
    }
 
}

 

location / {

if (XMLHttpRequest) {
    var req = new XMLHttpRequest();
    // 利用withCredentials属性来判断是否支持跨域请求
    if (!(“withCredentials” in req)) { // w3c先行
        if (window.XDomainRequest) {
            req = new XDomainRequest();
        }
    }
    req.open(‘POST’, url, true);
    req.onload = function (data) {
        alert(this.responseText);
    };
    req.send();
}

            root  D:\ftp;

注意xDomainRequest对象只支持http和https协议

            index  index.html index.htm;

在利用XMLHttpRequest对象发POST请求前会发一个options嗅探来确定是否有跨域请求的权限;同时在header头上带上Origin信息来指示来源网站信息,服务器响应时需要带上Access-Control-Allow-Origin头的值是否和Origin信息相匹配。

if ($request_method = ‘OPTIONS’) {

header(“Access-Control-Allow-Origin: “); // *为全部域名

add_header Access-Control-Allow-Origin *;

CORS的缺点是你必须能控制服务器端的权限,允许你跨域访问

add_header Access-Control-Allow-Credentials true;

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图