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

"Cross origin requests are only supported for HTTP." error when loading a local file

提问by corazza

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.

我正在尝试将 3D 模型加载到 Three.js 中JSONLoader，并且该 3D 模型与整个网站位于同一目录中。

I'm getting the "Cross origin requests are only supported for HTTP."error, but I don't know what's causing it nor how to fix it.

我收到"Cross origin requests are only supported for HTTP."错误消息，但我不知道是什么原因造成的，也不知道如何解决。

采纳答案by Andreas Wong

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 jsonpand change the url to http://example.com/path/to/model

因此，您可以在本地 PC 上安装网络服务器，也可以将模型上传到其他地方，然后使用jsonp并将 url 更改为http://example.com/path/to/model

Origin is defined in RFC-6454as

起源在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)，它们就会被视为不同的来源。

回答by Scott Stensland

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

蟒蛇 2

If you have Python installed...

如果你安装了 Python...

1. Change directory into the folder where your file some.htmlor file(s) exist using the command cd /path/to/your/folder

2. Start up a Python web server using the command python -m SimpleHTTPServer

1. some.html使用命令将目录更改为您的文件或文件所在的文件夹cd /path/to/your/folder

2. 使用命令启动 Python Web 服务器 python -m SimpleHTTPServer

This will start a web server to host your entire directory listing at http://localhost:8000

这将启动一个 Web 服务器来托管您的整个目录列表 http://localhost:8000

1. You can use a custom port python -m SimpleHTTPServer 9000giving you link: http://localhost:9000

3. 您可以使用自定义端口 python -m SimpleHTTPServer 9000为您提供链接：http://localhost:9000

This approach is built in to any Python installation.

这种方法内置于任何 Python 安装中。

Python 3

蟒蛇 3

Do the same steps, but use the following command instead python3 -m http.server

执行相同的步骤，但使用以下命令代替 python3 -m http.server

Node.js

节点.js

Alternatively, if you demand a more responsive setup and already use nodejs...

或者，如果您需要更灵敏的设置并且已经使用 nodejs ......

1. Install http-serverby typing npm install -g http-server

2. Change into your working directory, where yoursome.htmllives

3. Start your http server by issuing http-server -c-1

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

2. 切换到你的工作目录，你some.html住的地方

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

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

回答by Scott Stensland

In Chrome you can use this flag:

在 Chrome 中，您可以使用此标志：

--allow-file-access-from-files

Read more here.

在这里阅读更多。

回答by James Harrington

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.

只是想把它放在那里，以防其他人有类似的问题。

回答by Finn

Just change the url to http://localhostinstead of localhost. If you open the html file from local, you should create a local server to serve that html file, the simplest way is using Web Server for Chrome. That will fix the issue.

只需将 url 更改为http://localhost而不是localhost. 如果您从本地打开 html 文件，您应该创建一个本地服务器来提供该 html 文件，最简单的方法是使用Web Server for Chrome. 这将解决问题。

回答by CommonsWare

In an Android app — for example, to allow JavaScript to have access to assets via file:///android_asset/— use setAllowFileAccessFromFileURLs(true)on the WebSettingsthat you get from calling getSettings()on the WebView.

在一个Android应用程序-例如，允许JavaScript必须通过获得资产file:///android_asset/-使用setAllowFileAccessFromFileURLs(true)的WebSettings，你从调用获得getSettings()的WebView。

回答by KARTHIKEYAN.A

Use http://or https://to create url

使用http://或https://创建 url

error: localhost:8080

错误：localhost:8080

solution: http://localhost:8080

解决方案：http://localhost:8080

回答by Ridha Rezzag

fastest way for me was: for windows users run your file on Firefox problem solved, or if you want to use chrome easiest way for me was to install Python 3 then from command prompt run command python -m http.serverthen go to http://localhost:8000/then navigate to your files

对我来说最快的方法是：对于 Windows 用户在 Firefox 上运行你的文件问题解决了，或者如果你想使用 chrome 对我来说最简单的方法是安装 Python 3 然后从命令提示符运行命令python -m http.server然后转到http://localhost:8000/然后导航到您的文件

python -m http.server

回答by BlackBeard

I'm going to list 3 different approachesto solve this issue:

我将列出3 种不同的方法来解决这个问题：

1. Using a very lightweight npmpackage: Install live-serverusing npm install -g live-server. Then, go to that directory open the terminal and type live-serverand hit enter, page will be served at localhost:8080. BONUS: It also supports hot reloading by default.
2. Using a lightweight Google Chrome appdeveloped by Google: Install the app then, go to the apps tab in Chrome and open the app. In the app point it to the right folder. Your page will be served!
3. Modifying Chrome shortcut in windows: Create a Chrome browser's shortcut. Right-click on the icon and open properties. In properties, edit targetto "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"and save. Then using Chrome open the page using ctrl+o. NOTE: Do NOTuse this shortcut for regular browsing.

1. 使用非常轻便npm包：安装实时服务器使用npm install -g live-server。然后，转到该目录打开终端并键入live-server并按回车键，页面将在localhost:8080. 奖励：它还默认支持热重载。
2. 使用由 Google 开发的轻量级 Google Chrome应用程序：安装该应用程序，然后转到 Chrome 中的应用程序选项卡并打开该应用程序。在应用程序中将其指向正确的文件夹。您的页面将被送达！
3. 在 Windows 中修改 Chrome 快捷方式：创建 Chrome 浏览器的快捷方式。右键单击该图标并打开属性。在性能，编辑target到"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"和保存。然后使用 Chrome 打开页面ctrl+o。注意：请不要使用此快捷方式定期浏览。

回答by Yash P Shah

If you use Mozilla Firefox, It will work as expected without any issues;

如果您使用 Mozilla Firefox，它将按预期工作，没有任何问题；

P.S. Surprisingly, IntenetExplorer_Edge works absolutely fine!!!

PS 令人惊讶的是，IntenetExplorer_Edge 工作得非常好！！！