1. Cross-domain
The browser's restrictions on the same-origin policy of javascript, such as the following js cannot call js, objects or data in the js (because the sum is different domain), so cross-domain appears.
As mentioned above, what is the concept of the same domain??? The simple explanation is that the same domain name, the same port, and the same protocol
Same-original strategy:
The requested url address must be in the same domain as the url address on the browser, that is, the domain name, port, and protocol.
For example: My local domain name is to request another domain name for a piece of data. At this time, an error will be reported on the browser. This is the protection of the same-origin policy. If the browser does not have the protection of the same-origin policy for JavaScript, then some important confidential websites will be very dangerous.
2. Reverse proxy
The reverse proxy method refers to using a proxy server to accept connection requests on the Internet, then forwarding the request to the server on the internal network, and returning the results obtained from the server to the client requesting connection on the Internet. In this era, the proxy server is externally manifested as a reverse proxy server.
3. Angular4 cross-domain
Angular4 projects are divided into engineering code and production code. Local debugging is generally engineering code. For this way, if you write an interface, you will throw it on the server to test every time, which seriously affects efficiency. So what we need to do is to connect the interface to the project and see the effect at any time. However, if the backend code is not deployed on the local machine, there will be cross-domain problems, so we need to focus on solving cross-domain problems! In this way, the backend code can be modified at any time, and the front-end can also be changed at any time to see the effect, real separation of front-end and back-end!
For Angular4 to solve cross-domain problems, developers should have thought of this problem, so it is very simple to solve this problem! That is reverse proxy!!
The following is a reverse proxy method:
1. First, you need to create a JSON file with file name ""
{
"/api":{
"target":"http://106.15.179.92"
}
}
http://106.15.179.92: For the IP address of the machine you connect to, or the interface domain name you need to request, this needs to be proxyed
/api is the name of the proxy, generally the first parameter name after the IP address requested by the interface
For example: http://106.15.179.92/api/fron... is a login interface. When writing interface requests after the reverse proxy, you only need to write it.
this.$(`/api/front/frontUserController/`,data)
.then(res=>{
(res);
})
Because http://106.15.179.92 has been proxyed to /api!
2. Then configure the "" file
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config ",
"build": "ng build --prod --aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}
4. Solve cross-domain
Cross-domain? Is it related to our front-end? Is there any? No! If I don’t solve it, I won’t solve it. You will solve it in the back-end!
Now introduce a cross-domain solution that is common to any project!
Using nginx reverse proxy to implement cross-domain is the easiest way to cross-domain. You only need to modify nginx's configuration to solve cross-domain problems, support all browsers, support session, no need to modify any code, and will not affect server performance.
We only need to configure nginx and configure multiple prefixes on one server to forward http/https requests to multiple real servers. In this way, all URLs on this server have 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 served by physical servers. JavaScript inside these servers can call urls across domains on all of these servers.
Below, an example of nginx supporting cross-domain is given for specific explanation.
For example, we have two projects developed by pythonflask: testFlask1 and testFlask2.
The javascript script on the testFlask2 project needs to call a url of testFlask1 through ajax method to get some data.
Under normal circumstances, there will be cross-domain problems and the browser refuses to execute calls like this.
$("button").click(function () {
$.get("127.0.0.1:8081/partners/json", function (result) {
$("div").html(result);
});
});
Let’s modify the javascript file of the testFlask2 project. In this way, accessing the same-original URL will not have cross-domain problems.
$("button").click(function () {
$.get("partners/json", function (result) {
$("div").html(result);
});
});
However, our testFlask2 project actually does not have URLs like partners/json, so how to deal with it?
We write nginx configuration file like this:
server{
listen8000;
location/ {
includeuwsgi_params;
uwsgi_passunix:/tmp/;
}
location/partners {
rewrite^.+partners/?(.*)$ /$1 break;
includeuwsgi_params;
uwsgi_passunix:/tmp/;
}
}
We deploy the testFlask2 project in the root directory of port 8080. Deploy the testFlask1 project that provides web services in the /partners directory.
But our testFlask1 project cannot handle url requests like /partners/json. So what should I do?
Through rewrite^.+partners/?(.)$ /$1 break; this command, nginx can convert all received /partners/ requests into /* requests and forward them to the real web server behind it.
In this way, the ajax client program of RESTFUL can call the RESTFUL interface provided by any server by simply giving a specific prefix url.
Even through nginx's reverse proxy, we can call the RESTFUL interface provided by websites developed by other companies.
like,
location/sohu {
rewrite^.+sohu/?(.*)$ /$1 break;
includeuwsgi_params;
proxy_passhttp:///;
}
We moved the sohu website to our 8080:/sohu/ directory, and our javascript can call its RESTFUL service as much as possible.
By the way, rewrite^.+sohu/?(.)$ /$1 break; In this command, $1 represents the (.) part. The parameters in the first pair of () are $1, the parameters in the second pair of () are $2, and so on.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.