webpack+vue-cli 中proxyTable配置接口地址代理

在项目开发的时候，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们现在使用vue-cli进行项目打包的时候，我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问页面，但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，因此我们需要在打包的时候配置一下，我们进入 config/index.js 代码下如下配置即可：

dev: {// 静态资源文件夹assetsSubDirectory: 'static',// 发布路径assetsPublicPath: '/',// 代理配置表，在这里可以配置特定的请求代理到对应的API接口// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'// 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {'/api': {target: 'http://xxxxxx.com', // 接口的域名// secure: false,  // 如果是https接口，需要配置这个参数changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {'^/api': ''}}},// 本地访问 http://localhost:8080host: 'localhost', // can be overwritten by process.env.HOST

接口地址原本是 /save/index，但是为了匹配代理地址，在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index

注意： '/api' 为匹配项，target 为被请求的地址，因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉。

转载于:https://www.cnblogs.com/softwarefang/p/9361059.html

webpack+vue-cli 中proxyTable配置接口地址代理相关推荐

vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm ru ...
Vue中proxyTable配置
Vue中proxyTable配置: proxyTable: {'/api': {//遇到该请求则进行代理target: 'http://localhost:8080/', // 设置你调用的接口域名和 ...
配置vue打包后可以更改接口地址
有时候我们会遇到这种情况,项目开发完打包后,安排其他同事需要去客户现场集成,我们在去之前也不知道客户的服务器地址,这时候就可以把接口地址配置成打包后也可以更改,这样会方便许多,下面是具体流程: 1. ...
scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...
vue项目打包后修改接口地址
vue项目打包后修改接口地址我们在做vue项目时,总会遇到开发时用的测试地址和项目上线时用到的接口地址不同,再就是项目上线后,后期需要更改接口地址的情况.然而,如果没有一个配置文件,后期更换起来就只 ...
在 vue/cli 中使用 Module Federation
webpack5 的新特性,分模块共同开发.多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们.这通常被称作微前端,但并不仅限于此. 我们分为本地模块 ...
Vue Cli 中使用 jQuery
Vue Cli 中使用 jQuery 方式一: 1.安装 jquery npm install jquery 2.在想要使用 jQuery 的文件里面引入即可: import $ from 'jque ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...

webpack+vue-cli 中proxyTable配置接口地址代理

webpack+vue-cli 中proxyTable配置接口地址代理相关推荐

最新文章

热门文章