Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to configure the reverse proxy of vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to configure the reverse proxy of vue.

In vue, because the reverse proxy can hide the real server and bypass the cross-domain problems caused by directly requesting the real url, you need to use the reverse proxy to avoid cross-domain problems. In scenarios where the front end is developed separately from the front end, the front end needs to connect to the back-end interface and send the same origin request to the reverse proxy server.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

Why use the reverse proxy of vue

Reverse proxy usage scenario

In the scenario of separate development at the front and back ends, there is a server at the front end (providing static pages) and a server at the back end (providing interfaces)

At this point, when the front end needs to connect to the interface of the back end, there will be cross-domain problems.

In a publishing environment, if there is a cross-domain problem, use nginx

If the front and back end code is on one server, there is no cross-domain problem.

Cross-domain solution

Jsonp (front-end solution)

CORS (back-end solution): cross origin resource sharing

Reverse proxy (front-end solution)

What is reverse proxy?

Reverse proxy hides the real server so that the browser is still of the same origin

Reverse agency principle

Make the http request homologous by falsifying the request, and then send the homologous request to the reverse proxy server, which requests the real url, thus bypassing the cross-domain problem caused by directly requesting the real url.

Configuration of reverse proxy

Reverse proxy of vue-cli3

Create a new vue.config.js file under the root of the project

Configuration Code:

Module.exports = {undefined lintOnSave:false, devServer: {undefined proxy: {'/ api': {target: 'http://localhost:80', changeOrigin: true, pathRewrite: {undefined' ^ / api': ""} '/ apidouban': {undefined target:' http://localhost:3001', changeOrigin: true, pathRewrite: {undefined'^ / apidouban': ""}

Reverse proxy execution process:

/ api in the axios access address is converted to target + / api:

(convert eg:http:localhost:9000/api/goods to http://localhost:80/api/goods)

Create a virtual server

Remove / api:

(eg: http://localhost:80/goods)

At this point, I believe you have a deeper understanding of "how to configure the reverse proxy of vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.