After the project is deployed, the problem of front-end vue agent failure is solved

Title: Work diary, separation of projects before and after, and problems encountered during deployment. The Vue project is packaged into a dist file and placed on the server. The front-end is accessed by running the java-jar package and introducing static resources in application.yml. As shown below:

Question 1: The front-end page can be accessed, but the back-end cannot. Just run it locally.

First of all, the proxy server I configured in vite.config.ts on the front end can be started locally and there will be no cross-domain problems. However, if it is placed on the server, the proxy will become invalid.

Answer: After we package the project into a dist static file, the proxy server is extracted, so it cannot be accessed (as seen online)

Solution: If it is a static file introduced through the method in the above figure, there is no need to configure a proxy, just access the backend interface directly, otherwise you need to configure the proxy server nginx .

nginx introduction:

1. What is nginx:

   Nginx ("engine It is specially developed for performance optimization. Performance is its most important consideration. It pays great attention to efficiency in implementation and can withstand the test of high load. Reports indicate that it can support up to 50,000 concurrent connections. ·

2. reverse proxy

   server {
       listen       8089;       #监听的端口号
       server_name  localhost;  #浏览器通过访问这个地址和端口就能请求到nginx 
      
        location / {  
            proxy_pass http://127.0.0.1:5173/;   #这个为前端项目的访问地址
            #root   html;
            #index  index.html index.htm;   
       }
       location /api/ {   
           #前端向后端发出地址请求http://localhost:8089/api/user/login
           #就会将地址替换成 http://localhost:8050/user/login
             proxy_pass http://localhost:8050/;
       }