Https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html
What question?
In the Web development process, many times we are writing some simple demo, not to develop a complete project, at this time our common operation is:
- New Folder
- Create a new required file
- Complete the demo code in sublime (or other editor)
- Double-click the HTML file to run the demo directly in the browser
If there is an AJAX operation in the demo, the browser will report an error:
XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movie/view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
The reason is simple, the browser (WebKit kernel) security policy determines the file protocol access to the application cannot use the XMLHttpRequest
object, the error message is also very clear:
Cross origin requests is only supported for protocol schemes:http, data, Chrome, chrome-extension, HTTPS, Chrome-extensi On-resource.
Cross-domain requests only support protocols: HTTP, data, Chrome, chrome-extension, HTTPS, Chrome-extension-resource
This is allowed in some browsers, such as the Firefox browser, which means that Filefox supports AJAX requests under the file protocol.
Solutions
As my personal favorite chrome, strong, nothing to say, only unexpected, almost no can not do, so must also support:
- Windows:
- Set Chrome's shortcut properties, add--allow-file-access-from-files after "target", notice a space in front, and reopen Chrome.
- Mac:
- Only open the browser through the terminal: Open terminal, enter the following command: Open-a "Google Chrome"--args--disable-web-security then you can block secure access [--args: This parameter is optional]
Additional Information
In the long run, you must have access to your app via HTTP, and you'll need to configure the HTTP Server software. But for some just getting started, with an HTTP server (such as Apache, IIS, etc.) is more cumbersome, prohibitive.
- For the students who use the IDE, there is nothing to say, every IDE for Web development has a built-in HTTP server that doesn't have to be configured separately.
- For students who like the lightweight editor, such as Sublime Text, it defaults to a built-in HTTP server.
Next recommend a sublime plug-in Sublime Server
, this plug-in can provide a static file HTTP server, the specific use of the following:
- Install the package control (sublime plug-in management tool) and do not install your own Google
Command+Shift+P
or Ctrl+Shift+P
Open the command panel, enterPackage Control: Install Package
Wait a moment (this will connect to the plugin provider's server, slow, possibly back wall), searchSublimeServer
After installation is completeTool → SublimeServer → Start SublimeServer
Be sure to use sublime in the way you open folders, otherwise there is no way to use sublimeserver normally.
- Open the HTML file, select it in the context menu
View in SublimeServer
, and you can access the file in the browser in HTTP mode.
If this option is grayed out, it means that the sublimeserver is not started.Tool → SublimeServer → Start SublimeServer
So far, you can already use the HTTP server in sublime.
Problems that you may encounter
If Start SublimeServer
not, the current port may be 8080
occupied (Sublimeserver uses port 8080 by default)
The workaround is to open the configuration file to modify the port to a different port:
Here is my configuration:
{ "attempts": 5, "autorun": false, // 是否在启动Sublime时自动启动SublimeServer "defaultExtension": ".html", "interval": 500, "mimetypes": { "": "application/octet-stream", ".c": "text/plain", ".h": "text/plain", ".py": "text/plain" }, "port": 2016 // 端口号}
Of course, other editors also have similar plugins.
Original link
Configure Chrome to support local (file protocol) AJAX requests