Four lines of code, yes only four lines, so that the development efficiency of Miss Sister soars directly

Preface

" public account. Maybe you have never met before, but it is very likely that you are too late to meet.

Some time ago wrote a how I use these three gadgets, little sister help enhance the development efficiency of 100% , which describes how to use three most basic front-end knowledge , enhance the daily development partners to assist small efficient.

As for this article, it only takes 3 minutes to read, and you don’t need to learn three gadgets to gain:

How to use the least technical four lines of code to solve the most practical problems and improve 100% development efficiency

Of course the most important thing is that Miss Sister gives you a great

background

Most companies will have a security check for opening web pages in the APP (the general test environment will open the check). Links that do not comply with the security policy are not allowed to open. Although this eliminates security risks, in some scenarios , But seriously affect the development efficiency and experience.

For example, the young lady next to me recently encountered a problem:

Due to the security restrictions of the company's PC client, it is impossible to directly open the local link (the following three types) for web page debugging. It is quite troublesome and worrying during the development stage and when using local code to debug online problems.

http://192.168.35.220:8080/yuer-talent-center/index/talent/singer

http://127.0.0.1:7001

http://localhost:8080

Past solutions

target page (debug page): http://192.168.35.220:8080/yuer-talent-center/index/talent/singer

auxiliary jump page: https://uat-h5.xxx.com/yuer/voice-party/index/rule

As shown in the above figure, the direct configuration link cannot pass the security check, but with a page that can pass the security check, and then add a button to the page to jump to the target page, you can complete the jump to the target page.

What is the problem?

You need to modify the code of another project, add a button jump event, and then publish the project. This process will add irrelevant logic code to another project, and need to wait for its release, the process is relatively long.

1.  忘记删除代码后，容易造成线上质量问题，
1.  无法直接验证，需要等待另一个项目发布完成

Redirection resolution

The source of the problem is that the client will perform a security check on the opened link. The local link does not meet the security standard, so it will not be opened. We need to solve this problem from the perspective of bypassing the check. Reduce step one above and directly configure the page address that needs to be debugged.

Solution 1

Promote the client test environment not to do security verification, and the online environment should not be removed.

Advantages: once and for all, the local link of the test environment always supports access

Disadvantages of online environment cannot be supported. When you encounter an online problem that needs to be debugged with local code, it still cannot be solved.

Solution 2

Develop a service with a domain name, proxy to local development resources in real time, and then debug the page by configuring the domain name

advantages: test and online environment can be directly proxy to the local, which can bypass PC security checks.

Disadvantages: has a large development workload and no manpower support in a short time

Solution 3

Develop a page redirection function , when the PC side is accessed, it is a legal link, redirected to the target page through the server side, bypassing the PC security check

Advantages of for all, 1617205bdde05f can be tested and supported online, and the redirection function domain name is an intranet link, so there is no possibility of external security risks exposed, and the development workload is small

Disadvantages: did not expect the disadvantages 😄

Four lines of code

The idea is to add a 302 redirect function to the existing public node service

Configure routing

router.get('/redirect', redirect.redirect)

controller

async redirect() {
  const { redirectUrl = '' } = this.ctx.query
  redirectUrl && this.ctx.redirect(decodeURIComponent(redirectUrl))
}

Yes, only these four lines of code

is it too simple, so simple that it is horrible, hateful, and spitting! ! ! No technical content

is it too simple, so simple that it is horrible, hateful, and spitting! ! ! No technical content

is it too simple, so simple that it is horrible, hateful, and spitting! ! ! No technical content

how to use

Just add the link that needs to be redirected to the redirect link

// 如果url上带有中文，需要encodeURIComponent一下
https://test-fe.xxx.com/redirect?redirectUrl=yyy

// 例如
https://test-fe.xxx.com/redirect?redirectUrl=http%3A%2F%2F192.168.35.220%3A8080%2Fyuer-talent-center%2Findex%2Ftalent%2Fsinger

end

In addition to Kaisen, it is Kaisen. Today’s dreams are all sweet 😄, I wish you all a happy Mid-Autumn Festival in advance and good night!