【前端】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‘: ‘‘
                }
            }

        }
    }

  

 

原文地址:https://www.cnblogs.com/AHappyBird/p/11743538.html

时间: 2024-10-12 08:09:59

【前端】npm前端代理和转发的相关文章

【转】NPM设置代理

原文:http://my.oschina.net/deathdealer/blog/208919 很多公司上网需要使用公司提供的代理服务器,所以用NPM安装JS时可能需要配置代理,本文介绍NPM的配置相关基础知识,然后再介绍如何为NPM配置代理服务器. [例]: 我是这样设置的 $ npm config set proxy http://192.168.80.222:3128 $ npm config set registry http://registry.npmjs.org/ pm获取配置有

为npm设置代理

npm全称为Node Packaged Modules.它是一个用于管理基于node.js编写的package的命令行工具.其本身就是基于node.js写的,这有点像gem与ruby的关系. 在我们的项目中,需要使用一些基于node.js的javascript库文件,就需要npm对这些依赖库进行方便的管理.由于我们的开发环境由于安全因素在访问一些网站时需要使用代理,其中就包括npm的repositories网站,所以就需要修改npm的配置来加入代理. 下面简要介绍下npm的配置以及如何设置代理.

NPM设置代理

npm获取配置有6种方式,优先级由高到底. 命令行参数. --proxy http://server:port即将proxy的值设为http://server:port. 环境变量. 以npm_config_为前缀的环境变量将会被认为是npm的配置属性.如设置proxy可以加入这样的环境变量npm_config_proxy=http://server:port. 用户配置文件.可以通过npm config get userconfig查看文件路径.如果是mac系统的话默认路径就是$HOME/.n

前端npm命令大全可收藏

bable 安装:(1):npm install –g babel-cli(2):npm install -g cnpm --registry=https://registry.npm.taobao.org [国内域](3):npm install --save-dev babel-preset-es2015 (4):type nul>.babelrc [创建] 文件中写入{"presets":['es2015']} (5):babel js/es6.js -o js/es5.j

前端 NPM常用命令行

1. 登陆npm npm login 2. 将项目发布至npm npm publish 3. 查看已有源; 其中前面带星号的为当前使用的npm源 nrm ls 4. 切换源 nrm use <源名称>或<源地址> 如: nrm use taobao/https://registry.npm.taobao.org/ 如: nrm use npm/https://registry.npmjs.org/ 5. 添加源 nrm add 自定义源名称 <源名称>或<源地址&

【前端】日期正则表达式(转发)

原文地址 : 正则应用之--日期正则表达式    http://blog.csdn.net/akkzhjj/article/details/16867303 1        概述 首先需要说明的一点,无论是Winform,还是Webform,都有很成熟的日历控件,无论从易用性还是可扩展性上看,日期的选择和校验还是用日历控件来实现比较好. 前几天在CSDN多个版块看到需要日期正则的帖子,所以整理了这篇文章,和大家一起讨论交流,如有遗漏或错误的地方,还请大家指正. 日期正则一般是对格式有要求,且数

前端工程师(前端书籍推荐,前端知识结构)

一.技术的必须的 作为一名最基础的前端工程师你必须掌握HTML.CSS和JavaScript.三者必须同时精通,对前端知识一知半解的,一遇到问题就停下工作就四处搜索解决方案的,首先就算不上一个合格的前端人员.这样的如果当了前端工程师那工期肯定是不能保证的.合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下(包括搜索引擎),能够完成大多数任务. 以下知识点是作为一个前端工程师必须了解和熟悉的: DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动. DOM操作——怎样添加.

Czbk Web前端视频教程 前端全套教程 汪磊2015版Web前端视频教程 共12章 包含源码

<Web大前端-北京1期就业班[2015-11-2开课]>├<1.html>│ ├<1017_HTML01>│ │ ├01_基础班介绍.avi│ │ ├02_文件和文件夹管理.avi│ │ ├03_特殊案件和快捷键的使用.avi│ │ ├04_互联网原理.avi│ │ ├05_服务器和http.avi│ │ ├06_服务器的小演示.avi│ │ ├07_认识txt纯文本格式.avi│ │ ├08_HTML是描述文档语义的语言.avi│ │ ├09_HTML语义.avi│

npm设置代理提高下载速度

*nix上给网络类程序设置代理的通用办法,即导出http_proxy/https_proxy环境变量对npm不起作用 需要用npm自己的配置命令来解决: npm set proxy $PROXY npm set https-proxy $PROXY 设一个海外的服务器吧,速度杠杠的.. 另外,安装包时为避免半天不动看不到进度只有一个竖线在转,可以带上-ddd参数: sudo npm -ddd install -g cordova