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': ''
                    }
                }
    
            }
        }
    

      

     

     

  • 相关阅读:
    如何解决Windows 10系统下设备的声音问题
    mutex与semaphore的区别
    大端与小端,大尾与小尾,高尾端与低尾端,主机字节序与网络字节序
    详解C语言的htons和htonl函数、大尾端、小尾端
    sockaddr与sockaddr_in结构体简介
    使用socket()函数创建套接字
    struct socket 结构详解
    C语言函数sscanf()的用法
    使用 Socket 通信实现 FTP 客户端程序(来自IBM)
    C语言文件的读写
  • 原文地址:https://www.cnblogs.com/AHappyBird/p/11743538.html
Copyright © 2011-2022 走看看