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安全设置，要创建XMLHttpRequest，您需要有效的来源和有效的目的地目标是有效域，并且由于您启用了Access-Control-Allow-Origin，因此您可以从不同的来源发出请求。
但原点不是有效域，因为您正在从本地页面发出请求原点必须是有效的主机/标识符（网站的域名，浏览器扩展的标识符，嵌入到应用程序中的Web视图的应用程序ID）。

您可以使用以下选项来解决问题：

将您的页面存储在主机上，这也是很好的本地主机，您可以创建自动将主机和网页部署到客户的设置
停用浏览器安全设置：铬样品：

chromium-browser --disable-web-security --user-data-dir

检查这个答案，了解如何使用： https://stackoverflow.com/a/3177718/5081328
将您的页面嵌入到应用程序中并使用webview
创建一个浏览器扩展程序以加载您的页面

Answer 2

默认情况下，不允许来自file:协议的chrome，chromium的跨源请求。您可以使用--disable-web-security标志

关闭打开的铬，铬和启动实例

google-chrome --disabled-web-security

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

启动现有实例

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

是否有一种方法可以完成我需要做的事情不要求我修改本地Web浏览器的策略？

不修改铬，铬而不修改默认设置;或创建铬扩展或应用程序来执行网络请求 - 同样需要设置正确的permissions。

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

How FileReader.readAsText in HTML5 File API works?

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

但是，如果有限制，用户必须执行肯定操作以禁用默认设置，限制从file:协议访问本地文件系统，并限制本地文件系统从null获取资源origin来自不同的起源。

如@StefanoBalzarotti所述

抱歉，如果我挑剔，但这个限制与'文件：'无关协议，即使是'数据：'，'关于：'等......你不能交叉原产地要求。提出交叉原始请求的要求是有一个原产地主人

应该考虑浏览器开发人员对跨源请求实施此类默认限制的原因。

谨慎使用，并且意识到旗帜的重要性，标志--disable-web-security和--allow-file-access-from-files，请参阅

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

--disable-web-security不要强制实施同源策略。（用过的   人们测试他们的网站。）

--allow-file-access-from-files默认情况下，file：// URIs无法读取   其他文件：// URIs。这是对需要的开发人员的覆盖   用于测试的旧行为。

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

替换，

创建铬扩展以执行网络任务;
创建Chrome应用以执行网络任务

其中要么需要permissions处的manifest.json设置。

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

2 个答案: