Configure Chrome to support local (file protocol) AJAX requests, chromeajax

Configure Chrome to support local (file protocol) AJAX requests, chromeajax

What problems? 

In the WEB development process, we often write some simple demos, instead of developing a complete project. The common operations at this time are:

• Create a folder
• Create a required file
• Complete DEMO encoding in Sublime (or another editor)
• Double-click the HTML file and run the demo directly in the browser.

If there is an AJAX operation in the Demo, the browser reports 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 very simple. The security policy of the browser (Webkit kernel) determines that the file-accessed applications cannot use the XMLHttpRequest object. The error message also clearly states that:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Cross-origin requests only support protocol: http, data, chrome, chrome-extension, https, chrome-extension-resource

In some browsers, such operations are allowed. For example, in Firefox, Filefox supports AJAX requests under the file protocol.

Solution 

As my personal favorite Chrome, it is powerful and easy to say. I can't think of it, but I can hardly do it. So I have to support it as well:

Windows:

• Set the Chrome shortcut attributes and add-allow-file-access-from-files after the "target". Note that there is a space in front and you can re-open Chrome.

Mac:

• You can only open the browser through the terminal: open the terminal and enter the following command: open-a "Google Chrome"-args-disable-web-security, and then you can shield the security access [-args: this parameter is optional]

Additional instructions 

For a long time, you must access your application through HTTP, so you need to configure the HTTP server software. However, for some beginners, configuring an HTTP server (such as Apache and IIS) is cumbersome and prohibitive.

• There is nothing to say about using the IDE. Each IDE for Web development has a built-in http server and does not need to be configured separately.
• For those who like lightweight editors, such as Sublime Text, it does not have a built-in HTTP server by default.

Next, we recommend a Sublime plug-in Sublime Server, which provides a static file HTTP Server. The usage is as follows:

• Install Package Control (Sublime's plug-in management tool) and do not install Google
• Command + Shift + P or Ctrl + Shift + P open the Command Panel and enter Package Control: Install Package
• Wait a moment (the server of the plug-in provider will be connected at this time, which is slow and may be backed up) and search for SublimeServer
• After the installation is complete, use Tool → SublimeServer → Start SublimeServer
• You must use Sublime to open a folder. Otherwise, you cannot use SublimeServer normally.
• Open the HTML file and select View in SublimeServer from the right-click menu. Then, you can access the file in the browser via HTTP,
• If this option is gray, it indicates that SublimeServer, Tool → SublimeServer → Start SublimeServer is not started.

So far, you can use the HTTP server in Sublime.

Possible problems

If Start SublimeServer cannot be clicked, it may be that the current port 8080 is occupied (SublimeServer uses port 8080 by default)

SolutionIt is to open the configuration file and change the port to another port:

My configurations are as follows:

{"Attempts": 5, "autorun": false, // whether to automatically start SublimeServer "defaultExtension": "When Sublime is started ":". html "," interval ": 500," mimetypes ": {" ":" application/octet-stream ",". c ":" text/plain ",". h ":" text/plain ",". py ":" text/plain "}," port ": 2016 // port number}

Of course, other editors also have similar plug-ins.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.