加载本地文件时出现“仅HTTP支持跨源请求。”错误

本文翻译自：“Cross origin requests are only supported for HTTP.” error when loading a local file

I'm trying to load a 3D model into Three.js with JSONLoader , and that 3D model is in the same directory as the entire website. 我正在尝试使用JSONLoader将3D模型加载到Three.js中，并且该3D模型与整个网站位于同一目录中。

I'm getting the "Cross origin requests are only supported for HTTP." 我收到"Cross origin requests are only supported for HTTP." error, but I don't know what's causing it nor how to fix it. 错误，但我不知道是什么原因导致的，也不知道如何解决。

#1楼

参考：https://stackoom.com/question/j76F/加载本地文件时出现-仅HTTP支持跨源请求-错误

#2楼

My crystal ball says that you are loading the model using either file:// or C:/ , which stays true to the error message as they are not http:// 我的水晶球说您正在使用file://或C:/加载模型，这对错误消息保持正确，因为它们不是http://

So you can either install a webserver in your local PC or upload the model somewhere else and use jsonp and change the url to http://example.com/path/to/model 因此，您既可以在本地PC上安装Web服务器，也可以将模型上传到其他地方，然后使用jsonp并将url更改为http://example.com/path/to/model

Origin is defined in RFC-6454 as RFC-6454中将原点定义为

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

So even though your file originates from the same host ( localhost ), but as long as the scheme is different ( http / file ), they are treated as different origin. 因此，即使您的文件源自同一主机（ localhost ），但是只要方案不同（ http / file ），它们就被视为不同的来源。

#3楼

Just to be explicit - Yes, the error is saying you cannot point your browser directly at file://some/path/some.html 明确地说-是的，错误是说您不能直接将浏览器指向file://some/path/some.html

Here are some options to quickly spin up a local web server to let your browser render local files 这里有一些选项可以快速启动本地Web服务器，让您的浏览器呈现本地文件

Python 2 Python 2

If you have Python installed... 如果您安装了Python ...

1. Change directory into the folder where your file some.html or file(s) exist using the command cd /path/to/your/folder 使用命令cd /path/to/your/folder将目录更改为文件some.html或文件所在的文件cd /path/to/your/folder

2. Start up a Python web server using the command python -m SimpleHTTPServer 使用命令python -m SimpleHTTPServer启动Python Web服务器

This will start a web server to host your entire directory listing at http://localhost:8000 这将启动一个Web服务器来托管您的整个目录列表， http://localhost:8000为http://localhost:8000

3. You can use a custom port python -m SimpleHTTPServer 9000 giving you link: http://localhost:9000 您可以使用自定义端口python -m SimpleHTTPServer 9000为您提供链接： http://localhost:9000

This approach is built in to any Python installation. 此方法内置于任何Python安装中。

Python 3 Python 3

Do the same steps, but use the following command instead python3 -m http.server 执行相同的步骤，但是使用以下命令代替python3 -m http.server

Node.js Node.js

Alternatively, if you demand a more responsive setup and already use nodejs... 或者，如果您需要更敏感的设置并已使用nodejs ...

1. Install http-server by typing npm install -g http-server 安装http-server通过键入npm install -g http-server

2. Change into your working directory, where your some.html lives 进入您的some.html所在的工作目录

3. Start your http server by issuing http-server -c-1 通过发出http-server -c-1启动您的http服务器

This spins up a Node.js httpd which serves the files in your directory as static files accessible from http://localhost:8080 这会启动一个Node.js httpd，它将您目录中的文件作为可从http://localhost:8080访问的静态文件来提供

Ruby 红宝石

If your preferred language is Ruby ... the Ruby Gods say this works as well: 如果您首选的语言是Ruby ... Ruby Gods表示这也可以：

ruby -run -e httpd . -p 8080

PHP 的PHP

Of course PHP also has its solution. 当然，PHP也有其解决方案。

php -S localhost:8000

#4楼

Ran in to this today. 今天就参加这个。

I wrote some code that looked like this: 我写了一些看起来像这样的代码：

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

...but it should've looked like this: ...但是应该看起来像这样：

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

The only difference was the lack of http:// in the second snippet of code. 唯一的区别是第二个代码段中缺少http:// 。

Just wanted to put that out there in case there are others with a similar issue. 只是想把它放在那里，以防其他人遇到类似的问题。

#5楼

In Chrome you can use this flag: 在Chrome中，您可以使用以下标志：

--allow-file-access-from-files

Read more here. 在这里阅读更多。

#6楼

I was getting this exact error when loading an HTML file on the browser that was using a json file from the local directory. 在使用本地目录中的json文件的浏览器中加载HTML文件时，出现了确切的错误。 In my case, I was able to solve this by creating a simple node server that allowed to server static content. 就我而言，我能够通过创建一个简单的节点服务器来解决此问题，该服务器可以处理静态内容。 I left the code for this at this other answer . 我在另一个答案中为此保留了代码。