来自本地文件的 jQuery ajax 请求（Origin 'null' 不允许访问）

Question

我正在从本地文件进行 jQuery ajax 调用，该文件从网络服务器检索 JSON 数据：

$.ajax({
    type: 'GET',
    url: 'http://mywebsite.com/data.json',
    dataType: 'json',
    success: showData
});

我在 chrome 上收到以下错误：

XMLHttpRequest cannot load http://mywebsite.com/data.json. No 
'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'null' is therefore not allowed access.

我已经阅读了很多其他答案，似乎得出的结论是您无法使用 chrome 从本地文件发出 ajax 请求，因此解决方案是：

• 在服务器上托管发出请求的文件
• 使用“--allow-file-access-from-files”标志运行 chrome

但这些选项都不适合我。

但是，当我在另一个站点 (myjson.com) 上托管 JSON 数据时，ajax 请求中的行会读取

url: 'https://api.myjson.com/bins/myfile'

文件加载完美，数据显示正确。

为什么允许 ajax 请求发送到 'myjson.com' 而不允许发送到 'mywebsite.com'？

编辑：

我有电话

Header set Access-Control-Allow-Origin "*"

在我的 apache2.conf 文件中

Answer 1

您需要做的是在您的文档根目录中创建一个.htaccess 文件，并在其中添加以下行：

<FilesMatch "\.(json)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

以上几行的作用是，它们允许跨域资源共享 .json 文件上的所有域，从而消除错误。