JS maintains nginx reverse proxy, mom no longer need to worry about me cross domain!

reader-oriented

No matter what, si doesn’t cooperate with the cross-domain backstage sons!
Front-end dads who always forget how to configure the nginx proxy.
Reptilian gentlemen who always want to do some heiheihei across domains.
Munchkins who want to solve or want to know about cross-domain issues ……

desired outcome

Perform configuration file creation, modification with only one command line
JS configuration is simple and clear, will not JS partners understand the json format can easily maintain the

For those who are a little more advanced, you can develop the code twice!
Cross-domain is no longer difficult

Tools needed

node
cmd (command indicator)

You may need to know these things initially before getting started

1. What are forward/reverse proxies?

2. What is cross-domain

1) What is a forward/reverse proxy

Positive Agents:

I wanted to get C’s data, but couldn’t request C (e.g. Google), but I knew B was able to request C, so I went and told B, who got C’s data back for me, kind of going over the wall. Blackboard, highlight (C only knows that B is his sidekick, and doesn’t know who A is)

Reverse proxy:

I’m going to get C’s data again, but this time with luck, C I can directly access to (such as Baidu), that’s great Oh, I built my own server B, B help me get back C’s data. (C doesn’t know that B is his buddy, because AB is a gang)

2) What is cross domain

Write an AJAX request for an address other than your own (for starters)

Step 1: Find the interface

First of all, how to start looking for a variety of interfaces on the site, that my side to find a Baidu post bar post interface

Step 2: Create index.html to initiate AJAX requests

Open your favorite editor and copy the following code directly into it

<!DOCTYPE>
<html>
  <meta charset="UTF-8" />
  <head>
    <title></title>
  </head>
  <body></body>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>
    $.ajax({
      type: "post",
      url: "http://tieba.baidu.com/connectmanager/user/updateFlashInfo",
      data: '{"appid":"tieba","cuid":"73118464C47E43476FB3E50ACD8E32C9:FG:1","connection_id":"","lcs_ip":"10.46.235.62","lcs_port":"8891","lcs_fd":"10619","device_type":"21"}',
      async: true,
      success: function (res) {
        document.write(JSON.stringify(res))
      }
    })
  </script>
</html>

Try running a service? (This is a server opened from port 8020.)

Wow, 200 eh! I didn’t do anything but write a $.ajax and it worked? I just wrote $.ajax and it’s working.

Starting the nginx reverse proxy (advanced)

Here we do not talk about how to configure nginx under normal circumstances, Baidu a lot. Here directly attached to my github, you go to download and I have the following code for JS configuration to tell the story

(The download is essential because I have nginx built in on github)

Github：https://github.com/gs3170981/nginx_quick

Step 1: Configure server.js

1) After downloading the directory structure should look like this

2) Open server.js, the contents are roughly like this

(3) If you know or have been equipped with nginx, then you must be very chicken, yes, here is the presentation of the configuration items, meaning that the future management of the configuration file only need to modify here on the OK, because there are comments I will not explain one by one.

Be careful not to write ‘/’ backwards, or it will be escaped and reported as an error

Step 2: Execute the node command

1) Win+r open your cmd, cd to the directory where nginx is located (i.e., the directory where it was downloaded) and run

node server

If cmd doesn’t report an error, your file structure should look like this

2) Then please execute again

nginx

If you can’t click anything but close, it means it’s on (older drivers don’t usually use it this way…). Hey, recommended to double-click the directory to execute)

Step 3: Request to try!

nginx is a server, so the port turned on must be the port set in the js file

 127.0.0.1:8016

Holy shit, why isn’t it showing anything? Didn’t you output everything in the js? Let’s take a look at the console.

Sweat, it’s still cross-domain, but if you’re an old hand, you should have realized why you started to explain what forward/reverse proxies are, because there’s one step missing

Step 4: The final rematch!

Open index.html and change a little bit of code

<!DOCTYPE>
<html>
  <meta charset="UTF-8" />
  <head>
    <title></title>
  </head>
  <body></body>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>
    $.ajax({
      type: "post",
      url: "connectmanager/user/updateFlashInfo",
      data: '{"appid":"tieba","cuid":"73118464C47E43476FB3E50ACD8E32C9:FG:1","connection_id":"","lcs_ip":"10.46.235.62","lcs_port":"8891","lcs_fd":"10619","device_type":"21"}',
      async: true,
      success: function (res) {
        document.write(JSON.stringify(res))
      }
    })
  </script>
</html>

A, B are mutually recognized and on the same server, B proxy C, is equivalent to the same address, so need to be changed to a relative path

Okay, save and refresh.

Oh, my God, it looks like it worked. Look at the request again.

No errors were reported and it returned correctly!