zoukankan      html  css  js  c++  java
  • 【前端】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': ''
                    }
                }
    
            }
        }
    

      

     

     

  • 相关阅读:
    如何找出数组中重复次数最多的数
    如何计算两个有序整型数组的交集
    如何分别使用递归与非递归实现二分查找算法
    如何用递归算法判断一个数组是否是递增
    如何用一个for循环打印出一个二维数组
    如何用递归实现数组求和
    ElasticSearch安装和head插件安装
    SpringBoot全局异常处理方式
    Redis高级命令操作大全--推荐
    Mysql中FIND_IN_SET和REPLACE函数简介
  • 原文地址:https://www.cnblogs.com/AHappyBird/p/11743538.html
Copyright © 2011-2022 走看看