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

JavaScript

西门Harry

2020-03-11

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

我遇到了"Cross origin requests are only supported for HTTP."错误,但是我不知道是什么原因引起的,也不知道如何解决。

第544篇《“仅HTTP支持跨源请求。” 加载本地文件时出错》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

24个回答
卡卡西Near 2020.03.11

首先关闭所有chrome实例。

之后,遵循此步骤。

我在mac上使用了此命令。

“ / Applications / Google Chrome.app/Contents/MacOS/Google Chrome” --allow-file-access-from-files

对于Windows:

如何在“ --allow-file-access-from-files”模式下使用Chrome启动HTML?

Mandy村村 2020.03.11

没有服务器就无法加载静态本地文件(例如:svg)。如果您的计算机上安装了NPM / YARN,则可以使用“ http-server设置简单的http服务器

npm install http-server -g
http-server [path] [options]

或在该项目文件夹中打开终端,然后键入“ hs”。它将自动启动HTTP活动服务器。

乐米亚 2020.03.11

科尔多瓦实现了这一目标。我仍然不知道科尔多瓦的表现。它甚至没有通过shouldInterceptRequest。

后来我发现从本地加载任何文件的关键是:myWebView.getSettings()。setAllowUniversalAccessFromFileURLs(true);。

而且,当您要访问任何http资源时,Web视图将使用OPTIONS方法进行检查,您可以通过返回响应来通过WebViewClient.shouldInterceptRequest授予访问权限,对于以下GET / POST方法,您可以仅返回null。

阳光神奇 2020.03.11

使用具有以下href的锚标记时,我也能够重新创建此错误消息:

<a href="javascript:">Example a tag</a>

在我的情况下,一个标签被用于获取“指针光标”,并且该事件实际上是由一些jQuery on click事件控制的。我删除了href并添加了一个适用的类:

cursor:pointer;

Davaid前端 2020.03.11

这样做有很多问题,我的问题缺少'/'示例:jquery-1.10.2.js:8720 XMLHttpRequest无法加载http:// localhost:xxxProduct / getList_tagLabels / 必须是:http:// localhost:xxx / Product / getList_tagLabels /

希望对遇到这个问题的人有所帮助。

西里宝儿Harry 2020.03.11
  • 为Java安装本地Web服务器,例如Tomcat,对于php,您可以使用lamp等
  • 将json文件拖放到公共可访问的应用服务器目录中
  • 项目清单

  • 启动应用服务器,您应该能够从本地主机访问文件

MandyItachi 2020.03.11

所有人MacOS...设置一个简单的LaunchAgent以在您自己的Chrome副本中启用这些迷人的功能...

保存plist,命名什么launch.chrome.dev.mode.plist在,例如)~/Library/LaunchAgents具有相似的内容...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

应该在启动时启动..但是您可以随时使用terminal命令强制它启动。

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA!😎💁🏻🙊🙏🏾

西门理查德 2020.03.11

我刚刚发现一些官方用语:“由于跨域安全限制,尝试加载使用dojo / text插件的未构建的远程AMD模块将失败。(AMD模块的内置版本不受影响,因为通过以下方式消除了对dojo / text的调用:构建系统。)” https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

西里阿飞 2020.03.11

它加载本地文件的一种方法是在项目文件夹中而不是在项目文件夹外部使用它们。在您的项目示例文件下创建一个文件夹,类似于我们为图像创建的方式,并替换其中使用项目路径以外的完整本地路径并在项目文件夹下使用文件的相对URL的部分。对我有用

古一飞云 2020.03.11

我建议您使用小型服务器在本地主机上运行此类应用程序(如果您未使用某些内置服务器)。

这是一个非常简单的设置和运行方法:

https://www.npmjs.com/package/tiny-server
西门樱前端 2020.03.11

它只是说该应用程序应该在Web服务器上运行。我在chrome上遇到了同样的问题,我启动了tomcat并将我的应用程序移到那里,并且它可以正常工作。

卡卡西逆天 2020.03.11

我怀疑在某些答案中已经提到了它,但是我将对其稍作修改以得到完整的工作答案(更易于查找和使用)。

  1. 转到:https : //nodejs.org/en/download/安装nodejs。

  2. 通过从命令提示符运行命令来安装http-server npm install -g http-server

  3. 切换到index.html/ yoursome.html所在的工作目录

  4. 通过运行命令启动您的http服务器 http-server -c-1

打开Web浏览器到http://localhost:8080http://localhost:8080/yoursome.html -取决于您的html文件名。

卡卡西理查德 2020.03.11

在使用本地目录中的json文件的浏览器中加载HTML文件时,出现了确切的错误。就我而言,我能够通过创建一个简单的节点服务器来解决此问题,该服务器可以处理静态内容。我在另一个答案中为此保留了代码

斯丁卡卡西 2020.03.11

使用VS Code的人的简单解决方案

我已经有一段时间了这个错误。大多数答案有效。但是我找到了另一种解决方案。如果您不想node.js在这里处理任何其他解决方案,并且正在使用HTML文件(从另一个js文件调用函数或获取json api的功能),请尝试使用Live Server扩展。

它使您可以轻松打开实时服务器。并且由于它创建了localhost服务器,因此问题得以解决。您只需localhost打开HTML文件并在编辑器上单击鼠标右键,然后单击,即可开始Open with Live Server

它基本上使用http://localhost/index.html而不是使用加载文件file://...

编辑

不需要.html文件。您可以使用快捷方式启动Live Server。

点击(alt+L, alt+O)打开服务器,然后(alt+L, alt+C)停止服务器。[在MAC上,cmd+L, cmd+Ocmd+L, cmd+C]

希望它能帮助某人:)

神无阳光 2020.03.11

如果您使用Mozilla Firefox,它将按预期运行,没有任何问题。

PS出人意料的是,IntenetExplorer_Edge绝对可以正常工作!!!

LEY村村 2020.03.11

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

python -m http.server
米亚Stafan 2020.03.11

使用http://https://创建网址

错误localhost:8080

解决方案http://localhost:8080

番长GO 2020.03.11

对于Windows上没有Python或Node.js的用户,仍然有一个轻量级的解决方案:Mongoose

您要做的就是将可执行文件拖到服务器根目录下的任意位置,然后运行它。图标将出现在任务栏中,它将在默认浏览器中导航到服务器。

另外,Z-WAMP是100%便携式WAMP,可在单个文件夹中运行,真棒。如果您需要快速的PHP和MySQL服务器,这是一个选择。

GilJinJin 2020.03.11

我将列出3种解决此问题的方法:

  1. 使用非常轻便npm:安装实时服务器使用npm install -g live-server然后,转到该目录,打开终端并live-server输入,然后按Enter,将在处提供页面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注意:请不要使用此快捷方式定期浏览。
理查德十三 2020.03.11

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

神无 2020.03.11

只要将URL更改为http://localhost代替localhost如果您从本地打开html文件,则应创建一个本地服务器来提供该html文件,最简单的方法是使用Web Server for Chrome这样可以解决问题。

猪猪小卤蛋 2020.03.11

明确地说-是的,错误是说您不能直接将浏览器指向 file://some/path/some.html

Here are some options to quickly spin up a local web server to let your browser render local files

Python 2

If you have Python installed...

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

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

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

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

This approach is built in to any Python installation.

Python 3

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

Node.js

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

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

  2. Change into your working directory, where yoursome.html lives

  3. Start your http server by issuing 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

Ruby

If your preferred language is Ruby ... the Ruby Gods say this works as well:

ruby -run -e httpd . -p 8080

PHP

Of course PHP also has its solution.

php -S localhost:8000
Tom卡卡西 2020.03.11

在Chrome中,您可以使用以下标志:

--allow-file-access-from-files

在这里阅读更多。

神无前端Jim 2020.03.11

我的水晶球说您正在使用file://加载模型C:/,这对错误消息保持正确,因为它们不是http://

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

起源在RFC-6454中定义

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

因此,即使您的文件来自同一主机(localhost),但是只要方案不同(http/ file),它们都将被视为不同的来源。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android