javascript - 从本地 html/javascript 网站发布到在线 PHP 文件

Question

我想做什么

从本地 html/javascript 网站发布到在线 PHP 文件。

问题

当我尝试使用下面的代码时，我不断收到下面提到的错误。

背景:

本网站旨在在本地运行。由于每个用户都可以选择他们使用的浏览器，因此我希望找到一种可以解决上述问题的方法，而无需强制修改每个用户的浏览器策略。

这可能吗，如果可能的话如何？

Javascript 代码:

$.ajax({
    type: 'POST',
    url: 'http://example.com/test.php',
    crossDomain: true,
    data: "my_request_is=foo",
    dataType: 'json',
    success: function(responseData, textStatus, jqXHR) 
    {
        console.log(responseData);
    },
    error: function (responseData, textStatus, errorThrown) 
    {
        console.warn(responseData, textStatus, errorThrown);
        alert('CORS failed - ' + textStatus);
    }
});

PHP代码(test.php):

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type');
echo json_encode(array("your_request_was" => $_POST['my_request_is']));
?>

错误:

Answer 1

默认情况下，chrome 不允许跨域请求，chromium 来自 file: 协议(protocol)。您可以使用 --disable-web-security 标志关闭 chrome、chromium 和 launch 的打开实例

google-chrome --disabled-web-security

或通过设置不同的 user-data-dir

在现有实例打开的情况下启动

google-chrome --disable-web-security --user-data-dir="~/.config/google-chrome-temp"

---

is there an approach which could accomplish what I need to do, whilst not requiring me to modify the policies of local web-browsers?

不是在chrome，chromium不用修改默认设置；或创建 chromium 扩展程序或应用程序来执行网络请求 - 也需要设置适当的权限。

限制是有目的的。几个安全问题之一是本地计算机的用户可能在不知不觉中上传了他们计算机上一个或多个目录中的所有文件的列表，并且可能上传了目录本身，而不必意识到这一事实，请参阅

How FileReader.readAsText in HTML5 File API works?

哪个；请注意，也可能在没有设置标志的情况下发生。或者，请求的脚本可以执行读取或写入本地文件系统的操作，而用户不一定知道外部脚本正在访问他们的本地文件系统。

尽管存在限制，用户必须执行肯定操作以禁用默认设置，这些默认设置限制从 file: 协议(protocol)访问本地文件系统，并限制本地文件系统从 null origin 到不同的来源。

正如@StefanoBalzarotti 所指出的

sorry if I am fussy, but this limitation is not related to the 'file:' protocol, even with 'data:', 'about:' etc... you can't make a cross origin request. The requirement to make a cross origin request is to have an host for origin

关于浏览器开发人员对跨源请求实现这种默认限制的原因，应该考虑到这一点。

谨慎使用，并了解标志的重要性，标志 --disable-web-security 和 --allow-file-access-from-files，见

• How do I make the Google Chrome flag “--allow-file-access-from-files” permanent?

• List of Chromium Command Line Switches

专为本地 Web 开发而设计，而不是作为需要来自 Web 应用程序的资源的本地应用程序的解决方法。

--disable-web-security Don't enforce the same-origin policy. (Used by people testing their sites.)

--allow-file-access-from-files By default, file:// URIs cannot read other file:// URIs. This is an override for developers who need the old behavior for testing.

标志描述中的“测试”术语应强调标志的用法。这些标志不是为生产用途而设计的。

---

备选方案，

• 创建一个 chromium 扩展来执行网络任务；

• 创建一个 chrome 应用来执行网络任务

其中任何一个都需要在 manifest.json 中进行适当的 permissions 设置。