This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is my quick introduction to NGINX, there is a need for friends to refer to

preface

Our own system needs to load some components from the third party system. The plan is for a third party to develop and provide relevant interfaces, through which we can obtain data, and then use these data to implement relevant functions in our system

Unfortunately, the leadership did not coordinate. If the normal way can’t be done, it needs fancy work

As mentioned above, we pull data through the interface to re-render. This kind of gameplay is more conventional. The disadvantage is that we need to implement related modules again and the other side needs to open the interface.

Now we can only take the non-normal channels, for example, it is easy to think that we directly embed the page into our own system, and at the same time we need to control the style and components of the third party page

difficult

The method mentioned above is to plan an iframe in our own system and introduce the third-party system through the SRC attribute.

One of the biggest problems here is cross-domain. The most likely solution mentioned on the web is cross-domain via postMessage, which, unfortunately, requires third-party cooperation

Cross domain definition

First, the narrow sense of cognate means that the domain name, protocol, and port are the same.

Cross-domain means that the browser cannot execute scripts from other websites. This is caused by the browser’s same-origin policy, which is a security restriction imposed by the browser on JavaScript.

The characteristics of nginx

The reverse proxy

Configure a URL. If the user accesses this URL, the proxy can be sent to the actual url needed

Dynamic and static separation

As it is literally said, dynamic resources (which require the server to compute) are separated from static resources (typically HTML, CSS, JS, IMG, etc.)

Try to achieve

Because our application A uses port 80, and the third-party system B also uses port 80, we need to add A suffix to distinguish the proxy to system B. The approximate URL is as follows

# A: http://localhost/ # B: http://localhost/three-part # B: http://172.16.1.1/Copy the code

If we’re accessing localhost normally we’re going to go to the home page of System A, accessing 172.16.1.1 we’re going to go to the home page of system B, and if we’re accessing it through the proxy URL, Nginx is actually going to delegate to 172.16.1.1/three-part, and yes, when we’re testing, Did you notice the suffix was passed over?? Not to rule out that I am not professional and not configured properly, but that is the effect of my test

The idea of the above configuration is to make the two applications have the same IP address and port, and then the iframe of application A loads the home page of application B. In this case, you can use JS to operate

For example, if B’s proxy URL is set to localhost:81/, it is not possible to write js that changes B’s iframe in the same page as A’s iframe

The final result

As I applied F12 to B, I found that they encapsulated a x.min. Js file, which was loaded when I logged in and when I entered the home page.

So, SAO operation comes, I directly rewrite their js file, arrange the logic I need at the end of the file, and then let the page load the modified JS file on the server side when loading the x.min.js file, instead of loading the x.min.js file on the third-party server

The schematic diagram of the whole process is as follows:

Here is the nginx configuration I configured to use

upstream mir{
    server 10.1128.. 58: 80;
}
server {
	listen     localhost:8001;	Nginx specifies the url and port to listen to
	location =/static/mir.min.js {
		root C:/r9/bin/resources;
	}
	location / {
		"(upstream)
		proxy_pass http://mir;
		# The following items are cross-domain standard configuration, directly copy on the line
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Fonwarded-For $proxy_add_x_forwarded_for;
		if ($request_method = 'OPTIONS') {
			return 204;}}# Permit static resources
	location ~ \.(gif|jpg|jpeg|css|js|svg)$ {
		proxy_pass http://mir;
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Fonwarded-For $proxy_add_x_forwarded_for;
		expires 30d;
	}
	# Add cross-domain header
	add_header 'Access-Control-Allow-Origin' The '*';
	add_header 'Access-Control-Allow_Credentials' 'true';
	add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C ontent-Type,Content-Range,Range';
	add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
	#error_page 404 /404.html;

	# redirect server error pages to the static page /50x.html
	# Configure a general friendly error page
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
		root   html;}}Copy the code

The url matching in NGINx is characterized by the principle of “first match”. Each request, from top to bottom, matches the first rule and directly hops to the url corresponding to the configured rule

digression

Because of the third party system, in fact is a regular system, for example, the landing page, we need to swallow in this step, so we need a fudge in x.m. In detection of the third party system in js loaded correctly, whether you need to land operation, at the same time for friendship’s sake, we need to add a layer mask, Until we clean up our third party pages, we need to hide them from our customers.

After loading the third-party system correctly, you can tailor the function and replace the style as needed