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

      

     

     

  • 相关阅读:
    C#基础视频教程5.3 如何编写简单的超级热键
    spring boot中注入jpa时报could not autowire.No beans of 'PersonRepository' type found
    SpringBoot中常用注解@Controller/@RestController/@RequestMapping的区别
    idea如何搭建springboot框架
    Fiddler建好代理后,能连到手机,但手机不能上网了是什么原因
    如何用Fiddler对Android应用进行抓包
    【fiddler】抓取https数据失败,全部显示“Tunnel to......443”
    将excel的数据导入到数据库后都乱码了是怎么回事
    java保存繁体字到数据库时就报错Incorrect string value: 'xF0xA6x8Dx8BxE5xA4...' for column 'name' at row 1
    将爬取的网页数据保存到数据库时报错不能提交JPA,Caused by: java.sql.SQLException: Incorrect string value: 'xF0x9Fx98xB6 xE2...' for column 'content' at row 1
  • 原文地址:https://www.cnblogs.com/AHappyBird/p/11743538.html
Copyright © 2011-2022 走看看