To solve cross-domain problems in the front-end development with Nokitjs

problem

In the development of a number of "one-page application," often use Ajax and server communications, such as RESTful API, generally "front-end" and "server-side API" may have different people in charge, not under the same project, then the development process We may encounter problems in cross-domain, such as Chrome will see this error message in the console:

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access.

Browser because of security reasons, "same origin policy" does not allow "cross-domain", sometimes getting a little trouble to bring development process.

A common method

1. Access-Control-Allow-Origin

The current mainstream browsers support by adding the response header information server Access-Control-Allow-Originto allow cross-domain requests from those declared "domains", such as:

Access-Control-Allow-Origin: xxx.xyz

It may also allow cross-domain requests any source

Access-Control-Allow-Origin: *

Few scenes have to be used in the "production environment" *, if the development environment *, then when deploying to a production environment, in order to see Anquan Qi, either manual or automatic mode, you need to replace "a specific domain."

Of course, you can specify a particular "domain" in the development environment, such as on top of xxx.xyz, the development process that every developer needs to add the hostconfiguration as follows:

127.0.0.1 xxx.xyz

1. nginx reverse proxy

Cross-domain issues with the agency to resolve, do not add anything "response headers", and with WebServer nginx set up a "for development", and then we can put forward certain URL to a "destination address", then the front end with ajax request with an address in the field, so naturally there is no "cross-domain problems" a, nginx configuration approximately as follows:

...
location /api/ {
    rewrite  ^/api/(.*)  /$1 break;
    ...
} 
... 

This way, each front-end developers need to install and configure nginx, although you can just learn nginx, but still somewhat cumbersome.

Solve the problem Nokitjs

Nokitjs is a "A Web development framework" and express / koa / hapi and other similar framework for developing "Web application or Web site," where not to compare the pros and cons of each frame, but to solve the "cross-domain" issue.

Nokitjs provides a "command-line tool," use "Nokit CLI" global need to install Nokit directly in the terminal:

npm install nokitjs -g

Nokit CLI is generally used to start "the development of applications based on Nokit", but it also able to "specified directory" to launch a "static WebServer", as follows:

nokit start [端口] [应用目录省略时为当前目录] [其它选项]

"Other options" there is a -pulibcoption, you can specify "static resource directory", the following command will start a directory "static WebServer" in the current

npm start 8000 -public=./

How to solve cross-domain problems? , You also need a plug-in nokit-filter-proxy, followed by a description example, if we have a project, structured as follows:

应用目录
├── dist
├── package.json
└── src

distIs a "build tool" Build the target directory srcis the source directory, package.jsonit is NPM package configuration file.

Installation nokitjs and nokit-filter-proxy and saved to devDependencies

npm install nokitjs nokit-filter-proxy --save-dev

Configuration package.jsonof scripts, as follows

...
"scripts": {
    "start": "nokit start 8000 -public=./dist",
    "stop": "nokit stop",
    "restart": "npm stop && npm start",
    ...
}
...

Now, "you do not need to install global" nokitjs, executed in "Application List":

npm start

To launch a "static WebServer", you will see the following prompt:

[Nokit][L]: Starting...
[Nokit][L]: The server on "localhost:8000" started

You can be accessed in the browser http://localhost:8000a.

Then configure nokit-filter-proxy, in the "Application Directory" create a new file config.json, write the following:

{
    "filters": {
        "^/": "nokit-filter-proxy"
     },
     "proxy": {
        "rules": {
          "^/api/(.*)": "http://xxx.xyz/"
        }
     }
}

As configured, the first register nokit-filter-proxy, then add a forwarding rule, all /apiforward to the beginning of the URL http://xxx.xyz/, for example:

GET /api/user/id

It will be forwarded to the

GET http://xxx.xyz/user/id

You can add any number of forwarding rule, the higher the optimization level after more by the rules.

Nginx compared to a lot of easy, does not require each developer to install nginx configuration, you can get the code after the direct execution

npm install

Complete all depend on the installation, then you can use npm startto start Server, and preview or debug in the browser.

In addition, when it is invoked by -configspecifying configuration file name options such as

nokit start 8000 -public=./dist -config=webserver

Thus, the application root directory config.jsoncan be replaced webserver.jsonup.

Perhaps also we want different "environment" forwarded to a different "address", or each developer requires a different forwarding rules can -envalso be "NODE_ENV system environment variables" specified by environment configuration different specified below

nokit start 8000 -public=./dist -env=local

or

export NODE_ENV=local

In this way, the application can create a catalog config.local.jsonfile format and config.jsonthe same, nokit will merge these two files, the same configuration section "Environmental Profiles" will cover the "default profile" configuration.

Finally, attach the relevant module GitHub address:

1. nokitjs https://github.com/nokitjs/nokit

2. nokit-filter-proxy https://github.com/nokitjs/nokit-filter-...