这个代理配置不需要后台进行ngnix代理跳转了,前端可以做。在vue.config.js文件中进行配置,如下:

module.exports = {
publicPath: process.env.VUE_APP_BASEURL || '/',
// 修改webpack的配置
configureWebpack: {
// 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
externals: {
'T': 'T'
}
},
// devServer 选项单独配置
devServer: {
https: false,
proxy: {
'/sys': {
target: process.env.VUE_APP_API_URL,//这个是全局的环境配置变量,单独建立的文件,以VUE_APP_开头的变量,每个文件中都可以访问,假设这里是http://www.sweeeper.com
changeOrigin: true,
onProxyReq: function (proxyReq) {
proxyReq.removeHeader('origin')
}
},
'/v1': {
target: process.env.VUE_APP_API_URL,
changeOrigin: true,
onProxyReq: function (proxyReq) {
proxyReq.removeHeader('origin')
}
}
},
before: app => {
// applyMock(app)
}
}
}

  这里的‘/sys’是所有的axios里边的以这个开头的请求都替换成对应的http地址,这就也是所谓的前后端分离,只需要后端布置在服务器上,前端知道地址就可以进行交互。

如果已经配置了代理那么就不需要在axios中配置基地址了,因为给定的url里边已经替换了相关的字段。

像下边的就不需要设置再baseURL。(login.vue登陆文件中)

const newAxios = axios.create({
// baseURL: ROOT_URL,
timeout: 1500000
})

  举个登陆请求的例子:

import { request } from '@/common/js/axios'
import MD5 from 'crypto-js/md5'
import { getToken } from '@/common/js/cache' export function login ({ userNo, password }) {
const url = '/sys/security/logon'
return request({
url,
method: 'post',
data: {
userNo,
password: MD5(password).toString()
}
})
}

  那么请求时候这个地址就变成了:http://www.sweeeper.com/security/logon

说下vue工程中代理配置proxy的更多相关文章

  1. vue项目中Webpack-dev-server的proxy用法

    问题:在VUE项目中,需要请求后台接口获取数据,这时往往会出现跨域问题 解决方法:在vue.config.js中devServer配置proxy 常用的场景 1. 请求/api/XXX现在都会代理到请 ...

  2. vue工程权限怎么配置?

    vue工程权限怎么配置? router.beforeEach((to, from, next) => { }):方法的to参数能拿到router设置的对象信息,如: { path: " ...

  3. vue工程中使用iconfont在线CDN不生效的问题

    为什么在vue工程中引入iconfont有时候不生效呢? 请依次使用以下方法 1. 在index.html中引入在线资源 <!DOCTYPE html> <html lang=&qu ...

  4. 痞子衡嵌入式:MCUXpresso IDE下SDK工程在Build配置上与IAR,MDK差异

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是MCUXpresso IDE下SDK工程在Build配置上与IAR,MDK差异. 恩智浦 SW 团队每个季度都会公布 SDK.Tool ...

  5. Vue 项目中 ESlint 配置

    前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...

  6. Vue Nginx反向代理配置 解决生产环境跨域

    Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...

  7. webpack中代理配置(proxyTable)

    注:用axios请求 1,下载axios npm i axios --save 2,在config文件下的index.js中配置代理地址 参考:https://vuejs-templates.gith ...

  8. vue跨域代理配置

    实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...

  9. webpack+vue-cli中代理配置(proxyTable)

    在做vue的项目时,用到webpack打包工具,我们会发现本地开发开启的node服务地址请求接口的地址存在跨域问题.本地开启的服务地址是 http://localhost:8080 而服务器的地址是 ...

随机推荐

  1. JPush极光推送Java服务器端实例

    import cn.jpush.api.JPushClient; import cn.jpush.api.common.resp.APIConnectionException; import cn.j ...

  2. [CSP-S模拟测试]:联盟(搜索+树的直径)

    题目描述 $G$国周边的$n$个小国家构成一个联盟以抵御$G$国入侵,为互相支援,他们建立了$n−1$条双向通路,使得任意两个国家可以经过通路相互到达.当一个国家受到攻击时,所有其它国家都会沿着最短路 ...

  3. [CSP-S模拟测试]:赤壁情(DP)

    前赤壁赋 壬戌之秋,七月既望,苏子与客泛舟游于赤壁之下.清风徐来,水波不兴.举酒属客,诵明月之诗,歌窈窕之章.少焉,月出于东山之上,徘徊于斗牛之间.白露横江,水光接天.纵一苇之所如,凌万顷之茫然.浩浩 ...

  4. 认识setFactory

    平常设置或者获取一个View时,用的较多的是setContentView或LayoutInflater#inflate,setContentView内部也是通过调用LayoutInflater#inf ...

  5. handler消息机制入门

    handler消息机制入门 为什么要用handle? 我们在网络上读取图片信息时,是不能把耗时操作放在主线程里面的,当我们在子线程中获取到了图片的消息的时候,我们就需要把这个数据传给主线程. 而直接使 ...

  6. webpack 4.+版本需要注意的地方

    在webpack打包的时候需要npm下载webpack-cli,而且打包JS的命令从以前的webpack .\src\main.js  .\dist\boundle.js 要编程 webpack .\ ...

  7. lombda 使用记录

    ,,,}; String str1 = Arrays.stream(arr).boxed().map(i -> i.toString()) //必须将普通数组 boxed才能 在 map 里面 ...

  8. centos7运行yum报如下提示:Run "yum repolist all" to see the repos you have

    centos7运行yum报如下提示: There are no enabled repos. Run "yum repolist all" to see the repos you ...

  9. 测开之路二十六:Flask基础之最小web程序

    Flask中文文档:http://docs.jinkan.org/docs/flask/ 安装Flask库 选端口号的一种方法(避免和别人选的端口冲突,小于1024的时候重新选) 最小web程序 用1 ...

  10. 如何高效地学好R语言?

    如何高效地学好R语言? 学R语言主要在于5点三阶段: 第一阶段有一点:基础的文件操作(read.*, write.*).数据结构知识,认识什么是数据框(data.frame).列表(list).矩阵( ...