Detailed explanation of Vue data proxy

There are many ways to solve cross-domain problems, such as jsonp and cors, but both require the help of backend personnel.

1. What I am going to talk about below is a solution that front-end personnel can complete in vue-cli - data proxy

(1) First, you need to download a plug-in from the configuration item of the vue-cli official document

(2) Paste the part in the red circle in the above picture into the babel.config.js of the vue scaffold

(3) The red circled part http://localhost:5000 in the above figure is the local server address, but the service started by my project is http://localhost:8082/

At this point I send a request to the backend in my project

You can get the data

Note that if there is a file with the same name as the local server in the punlic folder of your project, it will be read first in the public folder of the project.

2. The above data agent still has the following defects

(1) If there is a local public file with the same file name as the server file, the local file will be returned first.

(2) Only a single agent can be created

1. In order to solve the above problems, another way to create a proxy can be used

In the above figure, /api and /apii are two different data agents.

2. At the same time, the interface path for the front-end to send requests should also be changed from http://localhost:8082/students to the following, so that files in the local public folder will not be requested.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!