Resolving Cross-domain request problems based on ANGULAR-CLI configuration agent

1. Cross-domain request generation

With the rise of different terminals (PAD/MOBILE/PC), more and more requirements for developers, the browser-side response has been unable to meet the high requirements of the user experience, we often need to develop customized versions for different terminals. In order to improve development efficiency, the need for the separation of the front and back ends is becoming more and more important, the backend is responsible for the business/data interface, the front-end is responsible for presentation/interaction logic, the same data interface, we can customize the development of multiple versions.
One of the problems with front and rear separation is that the server of front-end Web deployment and the server of back-end service are not under the same domain name, which will result in Cross-domain problem. 2. General Solution

If your browser supports HTML5, you can use the new Cross-domain policy once and for all: Cors.
Cors Full name Cross-origin Resource sharing, is the HTML5 specification defines how to access resources across domains.
Before we get to know cors, we'll understand the concept:
Origin represents the domain, which is the current page of the browser. When JavaScript initiates a request to Outland (such as Sina.com), the browser receives a response and first checks to see if the access-control-allow-origin contains the domain, and if so, the Cross-domain request succeeds and if not, the request fails and JavaScript cannot get the response of any data.

A graph is used to represent the following:

Assuming this domain is my.com, Outland is the sina.com, so long as the response head Access-control-allow-origin is http://my.com, or *, this request can succeed.

Visible, Cross-domain success, depending on whether the other server is willing to give you set a correct access-control-allow-origin, the decision is always in the hands of each other.

This cross-domain request, referred to above, is called a "simple request." Simple requests include, and post (the Content-type type of post is limited to application/x-www-form-urlencoded, Multipart/form-data, and Text/plain), And no custom headers (for example, x-custom:12345) can be present, usually to meet 90% of the requirements.

Whether you need to use JavaScript to request resources across domains through cors, you have to understand the principles of cors. The latest browsers fully support HTML5. When referencing the foreign resource, verify the Cors in addition to JavaScript and CSS.

The browser confirms that the Access-control-allow-methods header of the server response does contain the method of the AJAX request that will be sent before continuing to send Ajax, otherwise an error is thrown.

Because data sent in JSON format in post and put is common in rest, the server side must respond correctly to the options request in order to correctly handle post and make requests across domains. (excerpt from the Liaoche Teacher's article)

To learn more about Cors's children's shoes, please go to the document. 3.angular-cli Agent configuration resolves Cross-domain request issues

Using Cors is a good way to solve cross-domain problems, but it requires back-end developers to work with them, and if you want to fix the problem without modifying the backend code, configuring the agent is definitely the right choice.
Use Tomcat, Nginx ... Configuration agent of course, but the trouble, need to pack the code before deployment to Nginx (or other), in order to test the use of, to ensure the development efficiency, we hope that the code can be written as measured, then in the ANGULAR-CLI the advantage of configuring agents on the first show no doubt.
In the development of angular, angular-cli is very convenient, strongly recommended to use, today we mainly tell about ANGULAR-CLI how to resolve Cross-domain request problems by configuring the agent.

Need to know ANGULAR-CLI's children's shoes please ANGULAR-CLI official documents

If you have now used ANGULAR-CLI to build your project and the program is working properly, then we are now configuring the CLI proxy: 1. First we create the agent profile Proxy.conf.json

If the access address for your backend service is "10.4.60.200:8080", the following is an example of Proxy.conf.json:

{
  '/api ': {'
    target ': ' http://10.4.60.200:8080 ',
    ' secure ': false
  }
}

2. Rewrite Package.json

Modify the startup command by default using the agent file Configuration agent when NPM start

"Start": "Ng serve--proxy-config Proxy.conf.json",

At this point when you use NPM strat to start the angular project, the agent has been configured, we still take the above service URL as an example, if you need to access the Http://10.4.60.200:8080/api/server to obtain services, Now all you need to do is change the "10.4.60.200:8080" in the code to "localhost:4200" (the CLI default port is 4200, written according to your boot port).
At this point all of your service requests in the browser appear to be the same domain request, no longer a cross-domain problem, the above is a simple example, the agent has many parameters to choose the configuration, such as in the proxy when the cookie rewrite can be written as "Cookiedomainrewrite": " LocalHost ".

More detailed agent configuration can refer to Webpack-dev-server proxy settings