2021-01-06

Vue配置proxy

疯狂的地球人 2021-01-05 12:52:58 13 收藏

分类专栏： Vue学习笔记 文章标签： vue proxy 跨域 ajax跨域问题 devServer

最后发布:2021-01-05 12:52:58 首次发布:2021-01-05 12:52:58

版权

后台

const express = require('express')
const app = new express()

app.get(’/api/news’, (req, res) => {
// res.setHeader(“Access-Control-Allow-Origin”, ‘’)
// res.setHeader(“Access-Control-Allow-Headers”, '’) //响应所有请求
// res.setHeader(“Access-Control-Allow-Methods”, ‘*’) // 支持头信息自定义
console.log(‘请求’);
res.send(‘Hello World66666!’)
})
app.get(’/api/person’, (req, res) => {
res.send(‘me is person’)
})

app.get(’/get/person’, (req, res) => {
res.send(‘me is get person’)
})
app.get(’/book’, (req, res) => {
res.send(‘me is book’)
})
app.get(’/books’, (req, res) => {
res.send(‘me is books’)
})

app.listen(3000, () => {
console.log(‘Server Start’);
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

前台配置 proxy

module.exports = {
     
  devServer: {
     
    open: true,
    port: 9997,
    // 代理
    proxy: {
     
      // 拦截以 /api开头的请求
      "/api": {
     
        // 要跨域的域名 这里写了target的话，axios的baseURL就要取消掉
        target: "http://localhost:3000",
        // 是否开启跨域
        changeOrigin: true,
      },
      "/get": {
     
        target: "http://localhost:3000",
        changeOrigin: true
      },
      "/data": {
     
        target: "http://localhost:3000",
        changeOrigin: true,
        // 当接口地址里没有 /data开头 但是前端写了/data/来指定使用代理时，这里使用 ^/data：:"/" 可以把前端写的 /data 去掉来发送请求，否则发送的请求是 带有 /data的
        pathRewrite: {
     
          // '^/data': '/data'   // 这种接口配置出来     http://XX.XX.XX.XX:8083/data/login
          '^/data': '/' //这种接口配置出来     http://XX.XX.XX.XX:8083/login
        }
      },
}

}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

请求示例

const {
      data: news } = await this.$http.get("/api/news");
console.log("news:", news);
this.msg = news;

const apiPerson = await this.$http.get("/api/person");
console.log(“apiPerson:”, apiPerson);

const getPerson = await this.$http.get("/get/person");
console.log(“getPerson:”, getPerson);

const book = await this.$http.get("/data/book");
console.log("book: ", book);

const books = await this.$http.get("/data/books");
console.log("books: ", books);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

请求结果

vue 配置 proxy代理不生效_为什么采用 Proxy重构响应系统 | Vue3源码系列

weixin_39653766的博客

12-13 57

前言我们先看一下官方对其的定义用于定义基本操作的自定义行为修改的是程序默认形为，形同于在编程语言层面上做修改，属于元编程(meta programming)元编程(英文：Metaprogramming，又译超编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序(或者自身)作为它们的数据，或者在运行时完成部分本应在编译时完成的工作一段代码来理解元编程#!/bin/bash#...

vue中 proxy 配置及理解

jun999

07-08 1597

今天被 vue中 proxy 配置困扰了一天，记录一下。

项目中需要和两个不同的后台服务器接口进行响应，在开发过程中将第二个服务器接口默认写死了：http://www.beehub.paradeum.com/api/xxx 但是项目在生产环境中面临需要匹配https的情况，不能采用写死请求路径的情况，在项目大佬修改了大佬后终于成功了，代码及使用如下：

vue.config.js

proxy:{

//changexxx-api/login=>mock/login

…

插入表情

添加代码片

• HTML/XML
• objective-c
• Ruby
• PHP
• C
• C++
• JavaScript
• Python
• Java
• CSS
• SQL
• 其它

还能输入1000个字符 “速评一下”

Vue中 proxyTable的 配置

wzx19的博客

09-28 2034

proxyTable中进行一些路径 配置，可以在整个项目中应用。并解决跨域的问题

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

weixin_34221036的博客

12-17 352

webpack+ vue-cil 中 proxyTable 配置接口地址代理     在项目开发的时候，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们现在使用 vue-cli进行项目打包的时候，我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问页面，但是我们的接口地址是 http://xxxx.com/save/index ...

vue设置 proxy代理_xiaohuihui_z的博客

12-24

三、 代理服务器 (前端常用) 下边就写一下 vue项目中的 配置 在config / index.js proxyTable: { ‘/api’:{ target:‘http://***:18101/’, // API所...

vue2.0和 vue3.0 配置 proxy代理_一个学技术狮子的博客

12-16

vue3.0相对于 vue2.0在项目结构上去除了build和config目录; 在 vue2.0上 配置 proxy的方式,需要在config/index.js文件中直接修改就可以:

vue之 proxyTable代理超全面 配置

harmsworth的博客

11-23 2万+

proxyTable代理前言介绍 配置分离1. config.dev.js2. proxyTableHandler.js效果如下 前言 用了 vue有一年多了，从最初的摸着石头过河到现在已经能熟练的使用 vue开发项目，学到了许多，特别是 vue的代理 配置让我眼前一亮，甚是喜欢，故将自己对 proxyTable代理 配置整理出来，供致力于的开源的同辈浏览，望大家手下留情，哈哈_。 介绍 vue的 proxyTa...

说下 vue工程中代理 配置 proxy

weixin_30384217的博客

07-04 191

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

module.exports = {
publicPath: process.env.VUE_APP_BASEURL || ‘/’,
// 修改webpack的配置
configureWebpack: {
// 把原本需要写在webpack.config…

记录 Vue proxy代理 配置_lin13958756858的博客

12-24

vue.config.js 配置 module.exports= { devServer: { proxy: { '/lsh': { //1.lsh这个值 的意义在于,声明axios中url已/lsh开头的请求都适用于该规则,最后...

Vue-cli 3.0中 proxy代理 配置_陈志航1995的博客

12-25

由于 vue-cli3.0版本更加简化,原来的config文件取消,所有的 配置需要用户单独创建 vue.config.js 文件 放在根目录下。下面附上代码module.exports = { configureWebpack...

vue项目如何 配置 proxyTable解决跨域问题

旧城tk的博客

01-20 562

在项目的开发之中，做数据请求的时候，会经常遇到跨域的问题。我们可以在config目录下的index.js文件中， 配置 proxyTable去解决。

/api 是匹配所有以’/api’ 开头的请求路径，target是代理目标的基础路径，changeOrigin是支持跨域，pathRewrite是重写路径，去掉路径中开头的’/api’，代码如下所示：

const path = require…

Vue的 proxy 配置踩坑笔记

weixin_45003344的博客

12-04 1389

本想着就是个 配置文件，看看基本就可以实现代码了，唉…，搞了一下午，太轻敌了，最后的最后，发现不要在target网址值里面不要加引号，如果加上引号，就会把本机的api和服务器的api相连作为网址进行访问，找不到答案啊！期待以后找到答案再来记录 先记录一下这次实现的代码吧！

创建vue.config.js，同package.json同级，会被自动加载

module.exports = {
…

vue - proxy代理_idomyway的博客

12-19

vue.config.js 配置devServer: { open: false, port: 8801, // 代理 proxy: { '/user/adm/': { target: 'http://192.168.0.11:10001/', change...

关于 vue.config.js中 配置前端代理_冲锋

12-4

## 配置 正式接口地址 VUE_APP_URL = "你的正式接口地址" vue.config.js (代理 配置参考文档 proxy 代理) 以下边的接口来来测试(https://www.easy-mock.com/...

Vue进阶（十七）： vue proxyTable 配置

IT全栈 华强工作室

12-20 4798

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

vue项目 proxyTable 配置和部署服务器的问题

aydongzhiping的博客

07-18 1万+

在localhost环境下跑项目时，接口地址是 http://xxxx.com/save/index 这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，我们进入 config/index.js 代码下如下 配置即可。

dev: {
// 静态资源文件夹
assetsSubDirectory: ‘static’,
// 发布路径
assetsPu…

VueCli3.0 配置 proxy解决跨域_AndyPoplar

12-27

proxy中 配置字段的含义 proxy:{'/api':{target:'http://baidu.com',// 请求地址changeOrigin:true,// 在 vue-cli3中,默认changeOrigin的值是true,意味着服务...

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

• 关于我们
• 招贤纳士
• 广告服务
• 开发助手
• 400-660-0108
• [email protected]
• 在线客服
• 工作时间 8:30-22:00

• 公安备案号11010502030143
• 京ICP备19004658号
• 京网文〔2020〕1039-165号
• 经营性网站备案信息
• 北京互联网违法和不良信息举报中心
• 网络110报警服务
• 中国互联网举报中心
• 家长监护
• Chrome商店下载
• ©1999-2021北京创新乐知网络技术有限公司
• 版权与免责声明
• 版权申诉

疯狂的地球人 CSDN认证博客专家 CSDN认证企业博客

码龄2年 暂无认证

119

原创

1万+

周排名

6万+

总排名

2万+

访问

等级

1599

积分

20

粉丝

153

获赞

59

评论

62

收藏

私信

关注

热门文章

• 解决:Vue @dbclick双击事件不起作用、v-on:dbclick双击事件不起作用的问题 2649
• 解决华硕FX80G* Fn+F5或其他功能键切换不显示问题 2042
• MongoDB 在Node中的应用 921
• 解决 Uncaught SyntaxError: Unexpected token ‘＜‘ 错误解决方法 797
• 成功解决:TypeError: Cannot read property ‘$createElement‘ of undefined at render 643

分类专栏

• Vue学习笔记 22篇
• BUG合集 4篇
• Node 2篇
• JS学习笔记 40篇
• ES6 11篇
• VuePress 2篇
• CSS3学习笔记 7篇
• webpack 7篇
• HTML5 3篇
• 转载的好文章 1篇
• Bootstrap4.x 1篇
• Chrome插件开发 1篇
• PHP学习笔记 2篇
• 默认分栏 6篇
• Sass 5篇

最新评论

• JS sort()方法如何正确排序数字

  白给骚年: 一看就懂，可读性强

• GitHub 小白入门教程

  疯子.轩: 这是一个软件吗？

• HEAD detached from XXXX解决方法 HEAD detached at origin/master 问题的解决

  疯子.轩: ，，，

• 解决华硕FX80G* Fn+F5或其他功能键切换不显示问题

  疯狂的地球人: 过奖过奖~

• 解决华硕FX80G* Fn+F5或其他功能键切换不显示问题

  Rex~: 看君一席文，胜读十年书！

最新文章

• 解决华硕FX80G* Fn+F5或其他功能键切换不显示问题
• MongoDB 在Node中的应用
• HEAD detached from XXXX解决方法 HEAD detached at origin/master 问题的解决

2021年 1篇

2020年 114篇

2019年 5篇

目录

1. 文章目录
2. 后台
3. 前台配置 proxy
4. 请求示例
5. 请求结果