Some nonsense (directly look at the code can be skipped)

“Cross domain, how do!”

“Ask yourself, our backstage do not cooperate to solve.”

“You just write a few words ah, CORS, jSONp, header……”

“No way! Illegal! Not safe! …”

“Oh my God, this interface is cross-domain again, I CNMLGB”

“You can’t urL-get, form-post, and write your own Nginx proxy!” .

After a few monthsCopy the code

“This interface is cross-domain!”

“Write a reverse proxy. Didn’t you do that last time?”

“I TM forgot……”

If you’re stuck with your nginx friends anyway, this article will save you from having to fork out on Github without forgetting how to manage your nginx configuration

For the reader

  1. No matter what si won’t cooperate with the cross-domain backstage sons
  2. Front-end dads who forget how to configure nginx agents
  3. Reptilian gentlemen who want to cross borders
  4. New people who want to solve or learn about cross-domain problems……

What you want to achieve

  1. You can create and modify configuration files using only one command line
  2. JS configuration is simple, not JS partners understand json format can easily maintain

  1. For a slightly higher level of friends can be secondary development of the code
  2. Cross-domain is no longer difficult

Tools needed

  • node
  • CMD (command indicator)

Tips

The following is a quick tutorial from a beginner's point of view that you can skip throughCopy the code

You may need a primer on these things before you begin

1. What is forward/reverse proxy

2. What is cross-domain

1) What is forward/reverse proxy

Forward proxy:

I wanted to get the data of C, but I could not request C (such as Google), but I knew THAT B could request C, so I went to tell B, and B helped me get the data of C, which was a bit like climbing the wall. C knows THAT B is his friend, but he doesn’t know who A is.

Reverse proxy:

I had to get C’s data again, but luckily this time, I could directly access C (such as Baidu), that was great, I built a server B by myself, AND B helped me get C’s data back. C didn’t know B was his partner because AB was in the same group.

2) What is cross-domain

Request not (address | | port) is across the fieldCopy the code

Write an AJAX request that is not its own address (starting)

Step 1: Find the interface

First of all, we started to look for various interfaces on the website, so I found a Post interface of Baidu Post Bar

Request header

Request values

The return value

Step 2: Create index.html to initiate an AJAX request

Open your handy editor and copy the following code directly

<! 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" : "73118464 c47e43476fb3e50acd8e32c9: 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>
Copy the code

Try running the service? (Here is the server opened from port 8020)

Wow, 200! I didn’t do anything but write a $. Tong MAO…

Console is a standard cross-domain error. If 200 is returned, it will be truncated by the browser itself. Success will not get the value in Response anywayCopy the code

Start Nginx Reverse proxy (Advanced)

Here is not the normal situation of how to configure nginx, Baidu many. Here directly attached to my Github, you go to download and I will JS configuration of the following code

(The download is necessary because I have nginx built into Github.)

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

Step 1: Configure server.js

1) The directory structure should look like this after downloading

Here I have built-in nginx, open not happy.Copy the code

2) Open server.js and it looks something like this

3) If you are familiar with or used to configure nginx, then you must be very frozen, yes, here is the configuration items, meaning that the future management of configuration files only need to modify here, because there is a comment I will not explain.

Be careful not to write the ‘/’ backwards, otherwise it will escape an error

Step 2: Run the node command

1) win+r Open your CMD and CD to the directory where nginx was downloaded

node server

If CMD had not reported an error, your file structure would look like this

2) Then try again

nginx

If you can’t do anything but turn it off, it’s on. You are recommended to double-click the directory to execute.

Step 3: Ask to try!

Nginx is a server, so the port must be the port set in the JS file

Open the 127.0.0.1:8016Copy the code

Oh, my god. Why doesn’t it show anything? Isn’t it all output in JS? Let’s take a look at the console

It’s still cross-domain, but if you’re an old hand, you already know why we started with forward/reverse proxies, because there’s one step left. Right

Step 4: Last fight!

Open index.html and modify the code a little bit

<! 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"// Note that the relative path data is changed:'{" appid ":" tieba ", "cuid" : "73118464 c47e43476fb3e50acd8e32c9: 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>
Copy the code

A and B know each other and are on the same server. If B represents C, it is equivalent to the same address, so it needs to change to A relative path

Ok, save and refresh

Oh, my God. Looks like we got it. Look at the request again

No error, the correct return!

Related technical links

This article uses the Node (FS) module. If you want to know more, please check out the link below

CSDN：http://blog.csdn.net/Mcky_Love/article/details/78679291

The Denver nuggets: https://juejin.cn/post/6844903519749685262

about

Make: o sof f OVE▅▅▅▆ tune Tune Sky

blog：http://blog.csdn.net/mcky_love

github:https://github.com/gs3170981/nginx_quick (use word remember star oh!

conclusion

This function is mainly due to the fs file creation convenience, this can be used for a variety of batch file/folder operation environment, not only targeted at development oh ~