Question

我想通过浏览器上的 jQuery ajax 将视频上传到服务器。这是我的要求：

$.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: uploadUrl,
            data: data,
            processData: false,
            cache: false,
            timeout: 6000000,
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log("ERROR : ", e);
            }
        });
    });

错误：

<块引用>

从源 'http://192.168.1.4:3000' 访问 XMLHttpRequest at 'https://www.server.com' 已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头是出现在请求的资源上。

标题：

一般：
请求网址：https://www.server.com
推荐人政策：strict-origin-when-cross-origin

响应头：
access-control-allow-credentials：true
缓存控制：无存储、无缓存、必须重新验证
缓存控制：post-check=0，pre-check=0
内容编码：gzip
内容类型：文本/普通；字符集=utf-8
日期：格林威治标准时间 2021 年 6 月 1 日星期二 07:00:33
到期：格林威治标准时间 1997 年 7 月 26 日星期一 05:00:00
最后修改时间：格林威治标准时间 2021 年 6 月 1 日，星期二 07:00:33
pragma：无缓存
referrer-policy：strict-origin-when-cross-origin
服务器：nginx
set-cookie：playIconOnHover_1=old;路径=/
设置cookie：AFCN=162253083336672； expires=Sun, 01-Jun-2031 07:00:33 GMT;最大年龄=315532800；路径=/；域=.server.com
set-cookie：PHPSESSID=APAf3-e162d2860b1219b0633755a88-302087；路径=/
set-cookie：PHPSESSID=APAf3-e162d2860b1219b0633755a88-302087；到期=格林威治标准时间 2021 年 8 月 30 日星期一 07:00:33；最大年龄=7776000；路径=/
set-cookie：serverUid=84db2%2C302087；到期=星期二，2021 年 6 月 1 日 11:00:33 GMT；最大年龄=14400；路径=/； domain=.server.com
set-cookie：apr_lb_id=m6；路径=/； domain=.server.com
传输编码：分块
变化：接受编码
x-content-type-options：nosniff
x-frame-options：SAMEORIGIN
x-powered-by：服务器框架/1.0.1
x-solr：0
x-solr-cnt：0
x-xss-保护：1；模式=块

请求标头：
接受：/
接受编码：gzip、deflate、br
接受语言：en-US,en;q=0.9
连接：保持连接
内容长度：1570763
内容类型：application/x-www-form-urlencoded；字符集=UTF-8
主持人：www.server.com
来源：http://192.168.1.4:3000
推荐人：http://192.168.1.4:3000/
sec-ch-ua：“不是 A;品牌”;v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile：?0
Sec-Fetch-Dest：空
Sec-Fetch-Mode：cors
Sec-Fetch-Site：跨站点
用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/90.0.4430.212 Safari/537.36

然后我添加了这个标题：

$.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: uploadUrl,
            data: data,
            processData: false,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Headers': 'application/json',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
                'Access-Control-Allow-Credentials': true,
            },
            cache: false,
            timeout: 6000000,
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log("ERROR : ", e);
            }
        });
    });

错误：

<块引用>

从源 'http://192.168.1.4:3000' 访问 XMLHttpRequest at 'https://www.server.com' 已被 CORS 政策阻止：对预检请求的响应没有“未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

然后我测试了jsonp：

$.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: uploadUrl,
            data: data,
            processData: false,
            dataType: 'jsonp',
            cache: false,
            timeout: 6000000,
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log("ERROR : ", e);
            }
        });
    });
}

和错误：

<块引用>

jquery.min.js:2 跨域读取阻止 (CORB) 阻止了 MIME 类型为 text/plain 的跨域响应 https://www.server.com/?callback=jQuery360009544112228460921_1622530021674&_=1622530021675。有关详情，请参阅 https://www.chromestatus.com/feature/5629709824032768。

Answer 1

如果您有权访问 .htaccess 文件，则添加 Access-Control-Allow-Origin:* 可能会起作用。否则，他们通常会将其设置为 Access-Control-Allow-Origin: www.example.com

CORS 的存在是有原因的，它是为了阻止未经授权的人访问某些数据或将数据发送到某个地方。

以下是 Mozilla 的描述：
跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它允许服务器指示浏览器应允许加载资源的任何其他来源（域、方案或端口）。 CORS 还依赖于浏览器向托管跨域资源的服务器发出“预检”请求的机制，以检查服务器是否允许实际请求。在该预检中，浏览器发送指示 HTTP 方法的标头和将在实际请求中使用的标头。

跨域请求的一个示例：从 https://domain-a.com 提供的前端 JavaScript 代码使用 XMLHttpRequest 向 https://domain-b.com/data.json 发出请求。

出于安全原因，浏览器会限制从脚本发起的跨域 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一来源请求资源，除非来自其他来源的响应包含正确的 CORS 标头。

在此处阅读更多相关信息 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

如何在浏览器上发送 ajax POST？

1 个答案: