Configure Chrome to support local (file protocol) AJAX requests

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+Por 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