ANGUALR cross-Domain access configuration

Browser restrictions on the same-origin policy of JavaScript, for example, JS in a.cn cannot call JS, object or data in b.cn (because a.cn and b.cn are different domains), so cross-domain appears:

The simple explanation is the same domain name, the same port, the same protocol

Homologous policy:
The requested URL address must be on the same domain as the URL address on the browser, that is, the domain name, port, and protocol.

If my domain name on the local is study.cn, request another domain name for a piece of data

This time on the browser will be error

This is the protection of the homologous strategy, if the browser does not have the same origin policy protection, then some important confidential sites will be very dangerous ~

• Reverse Proxy

The reverse proxy method refers to a proxy server that accepts connection requests on the Internet, then forwards the request to a server on the internal network and returns the results from the server to the client requesting the connection on the Internet, Reverse. At this point the proxy server appears as a reverse proxy server externally.
Angular cross-domain
Angular project is divided into engineering code and Production code, in the local debugging is generally engineering code, so the interface, each write an interface to be dropped to the server to test, seriously affect the efficiency, so we need to do is in the project on the interface, can see the effect at any time, But the backend code is not deployed in this machine, there will be cross-domain issues, so we need to focus on solving cross-domain problems! So that the backend code at any time, the front end can be changed at any time to see the effect, to achieve a true front-end separation!
For angular solve cross-domain problem, should be the developer already thought this problem, so solve this problem is simple! That's the reverse proxy!!
Here's how to reverse proxy:
First you need to create a JSON file, the file name "
Proxy.config.json

{"/api":{"target":"http://106.15.179.92"}

• 1
• 2
• 3
• 4

http://106.15.179.92: For you to connect the IP address of the machine, or you need to request the interface domain name, this is the need to be proxied
/api is the name of the proxy, which is typically the folder name after the IP address requested by the interface
For example: Http://106.15.179.92/api/front/frontUserController/login.do, for a login interface, reverse proxy post-write interface requests only need to write

this.$http.post(`/api/front/frontUserController/login.do`,data).then(res=>{Console.log(res);})

• 1
• 2
• 3
• 4

Because http://106.15.179.92 has been acting on the/API!

Then configure the Package.json file

"scripts": {"ng": "ng","start": "ng serve --proxy-config proxy.config.json","build": "ng build --prod --aot","test": "ng test","lint": "ng lint","e2e": "ng e2e"

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Throw the pan to solve the cross-domain approach  
Cross-domain? Is it related to our front end? No, I'm not, I'm not going to fix it, you back-end to solve the! 
now introduces a way to solve cross-domain methods that are common to any project! 
It is the simplest cross-domain method to implement cross-domain with Nginx reverse proxy. Only need to modify nginx configuration to solve cross-domain problems, support all browsers, support session, no need to modify any code, and do not affect server performance.  
We only need to configure Nginx to configure multiple prefixes on one server to forward HTTP/HTTPS requests to multiple real servers. This way, all URLs on this server are the same domain name, protocol, and port. Therefore, for browsers, these URLs are homologous and have no cross-domain restrictions. In fact, these URLs are actually serviced by a physical server. JavaScript within these servers can invoke URLs on all of these servers across domains.  
below, give an example of the Nginx support cross-domain, to specify.  
For example, we have two projects developed by Pythonflask: TestFlask1 and TestFlask2.   the JavaScript script on the
TestFlask2 project wants to get some data by calling a URL for TestFlask1 in AJAX mode.  
Normal deployment, there will be cross-domain issues, the browser refused to do the following such a call.

$("button").click(function () {$.get("127.0.0.1:8081/partners/json", function (result) {$("div").html(result);});

• 1
• 2
• 3
• 4

Let's modify the Javascrip file of the TESTFLASK2 project below. There is no cross-domain issue when accessing the same-origin URLs.

$("button").click(function () {$.get("partners/json", function (result) {$("div").html(result);

• 1
• 2
• 3

However, we testFlask2 the project actually does not partners/json such a URL, then how to deal with it?
We write the Nginx configuration file like this:

server{listen8000;location/ {includeuwsgi_params;uwsgi_passunix:/tmp/testFlask2.sock;location/partners {rewrite^.+partners/?(.*)$ /$1 break;uwsgi_passunix:/tmp/testFlask1.sock;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

We deployed the TESTFLASK2 project under the root directory of port 8080. Deploy the TESTFLASK1 project that provides the Web service under the/partners directory.
However, our TestFlask1 project does not handle URL requests such as/partners/json. What about that?
With rewrite^.+partners/?(.*)$ /$1 break; This command, Nginx can transfer all incoming/partners/requests to / from the real Web server behind.
In this way, the RESTful AJAX client program can invoke the restful interface provided by any server simply by giving the URL of a specific prefix.
Even with Nginx's reverse proxy, we can invoke the RESTful interface provided by other companies ' Web sites.
Such as

location/sohu {rewrite^.+sohu/?(.*)$ /$1 break;proxy_passhttp://www.sohu.com/;

• 1
• 2
• 3

We've moved the Sohu website to our 8080:/sohu/directory, and our JavaScript will be able to invoke its restful service.
By the way, rewrite^.+sohu/? (.*)//1 break; In this order,1TableShown(.?)ThisADepartmentScore of。The to () inside Ginseng number is 1 = (.?) This part. The parameter in the first pair () is 1, the parameter in the second pair () is $, and so on.

ANGUALR cross-Domain access configuration