【前端】npm前端代理和转发

npm前端代理和转发：

在后端服务开启的状态下，npm run build （生产环境）将前端打包成静态文件，和后端服务放在一起，即可直接调用，例如后端开启8888端口，在localhost:8888直接访问前端网页。

在后端服务开启的状态下，npm run sevre（开发环境）前端文件（js、html、vue等）仍在前端的域中，不被允许跨域交互（同源策略），如果要和后端数据交互，则需要中间端口进行代理和转发。

fetch.js 文件中写好前端的URL

let service = axios.create({ // 已经是一个promise 了
  baseURL: '/',
  timeout: 30000
});

无论有无代理，访问时的URL会写为 /

在vue.config.js文件中，设置代理方式和无代理时的访问URL

module.exports = {
    // 修改的配置
    // 将baseUrl: '/api',改为baseUrl: '/',
    baseUrl: '/static',
    devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:8888',
                changeOrigin: true,
                ws: true,
                // pathRewrite: {
                //   '^/api': ''
                // }
            }
        }
    }
}

无代理访问的URL：baseUrl

devServer：开发环境下的代理。当前端请求发送到中间端口时，请求将识别到包含 / 的url，并把请求转发到8888端口。

但是当后端开启多个服务时（8888和8889），前端代理就需要指明转发到不同的服务端口，那么代理就需要区分不同的URL。

实际上，所访问到的不同的url是在cgi部分指定的，例如定义了api和api2，分别要访问两个服务，则在devServer写为：

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8888',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            },
            '/api2': {
                target: 'http://localhost:8889',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api2': ''
                }
            }

        }
    }