Front-end solution to cross-domain ------ reverse proxy

1. Using reverse proxy in the Vue project to solve cross-domain problems can be achieved by configuring Vue's development server (webpack-dev-server). Here are the specific steps:

Note: This configuration is only valid in the development environment. In a production environment, you need to use other methods to solve cross-domain issues, such as configuring the relevant configuration on the backend server.

Now, when you initiate a request prefixed /apiwith , the Vue development server will forward the request to the target server and return the response result to the front-end, thus solving the cross-domain problem.

For example, if you want to access /api/userthe interface, you can use in the front-end code /api/userto initiate the request without worrying about cross-domain restrictions.

2. Use middleware proxy in Node.js to solve cross-domain problems. You can use http-proxy-middlewarethis library to achieve this.

1. Open the file in the root directory of the Vue project  vue.config.js (create a new one if it does not exist).
2. Add the following code to the file to configure the reverse proxy:

   module.exports = {
     devServer: {
       proxy: {
         '/api': { // 这里的 '/api' 是你希望通过代理访问的请求前缀，可以根据实际情况进行修改
           target: 'http://目标服务器的域名或IP地址', // 设置目标服务器的地址，即要跨域访问的后端接口地址
           changeOrigin: true, // 将主机标头的原点改为目标URL
           pathRewrite: {
             '^/api': '' // 去掉请求前缀，例如将 '/api/user' 转为 '/user'
           }
         }
       }
     }
   };

   Please replace in the above code http://目标服务器的域名或IP地址with the actual target server address.

3. Save  vue.config.js the file.
4. Restart the Vue development server.

1. First, install the library using npm or yarn in your Node.js project http-proxy-middleware:

npm install http-proxy-middleware

1. Create a middleware file (for example: proxyMiddleware.js) in your Node.js project and add the following code:

2. const { createProxyMiddleware } = require('http-proxy-middleware');
   
   const proxyMiddleware = createProxyMiddleware({
     target: 'http://目标服务器的域名或IP地址', // 设置目标服务器的地址，即要跨域访问的后端接口地址
     changeOrigin: true, // 将主机标头的原点改为目标URL
   });
   
   module.exports = proxyMiddleware;

   Please replace in the above code http://目标服务器的域名或IP地址with the actual target server address.

3. Now, use this middleware in your main application file (eg: app.js):

   const express = require('express');
   const proxyMiddleware = require('./proxyMiddleware');
   
   const app = express();
   
   // 其他中间件和路由设置...
   
   // 使用代理中间件来处理跨域请求
   app.use('/api', proxyMiddleware);
   
   // 其他路由设置...
   
   // 启动服务器
   app.listen(3000, () => {
     console.log('Server is running on port 3000');
   });

   Please replace in the above code /apiwith the request prefix you wish to use for the proxy.

4. Save the file and start the Node.js server. Now, when you initiate a request /api with , the Node.js server will forward the request to the target server and return the response result to the front-end, thereby solving the cross-domain problem.

5. Note: This method only works on the Node.js server side and is suitable for development and production environments. But be careful to configure appropriate security and permission controls in your production environment.