Vue基础17之配置代理

最新推荐文章于 2024-07-16 11:24:34 发布
最新推荐文章于 2024-07-16 11:24:34 发布
阅读量4.5k 收藏 5
点赞数 2
分类专栏： 前端 Vue基础 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/129282818
版权

Vue基础17

配置代理

使用node启动两台服务器

server1.js

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

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	// console.log('请求来自于',request.get('Host'));
	// console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

server2.js

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

app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})

app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})

app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})

在这里插入图片描述
在这里插入图片描述
发送Ajax请求的三种方式：1.xmr（new XMLHttpRequest()） 2.jQuery 3.axios 4.fetch

使用axios发送ajax请求

安装axios库

npm i axios

在这里插入图片描述

引入axios库

import axios from ‘axios’

在这里插入图片描述

发送axios请求

App.vue
<template>
  <div class="bg">
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "App",
  methods:{
    getStudents(){
      axios.get('http://localhost:5000/students').then(
          response=>{
            console.log("请求成功了,",response.data)
          },
          error=>{
            console.log("请求失败了，",error.messages)
          }
      )
    }
  }
}
</script>

<style lang="less">

</style>

在这里插入图片描述

跨域问题解决

  1. 跨域：违背了同源策略(协议名、主机名、端口号三者一致)
    过程：localhost:8080 向 localhost:5000 请求数据，localhost:5000也及时响应给8080了，localhost:8080拿到数据了，但是发现跨域了，并没有再请求localhost:5000了
  2. 解决跨域的三种方式
    （1）cors: 通过响应时候加上一些特殊的响应头让浏览器识别（后端操作）
    （2）jsonp：通过script的src属性在引入外部资源时候不受同源策略限制特点实现，但是只能解决get请求，并不常用
    （3）代理服务器：
    在这里插入图片描述
  3. 开启代理服务器的方式：
    （1）nginx 反向代理方式（学习成本高，这里不赘述）
    （2）vue-cli 开启代理服务器
  4. vue-cli开启代理服务器
    devserver-proxy官方文档
代理服务器开启：方式一

vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages:{
    index:{
      //入口
      entry: 'src/main.js'
    }
  },
  lintOnSave: true,  //关闭语法检查
  //开启代理服务器
  devServer: {
    proxy: 'http://localhost:5000'
  }
})

App.vue:

<template>
  <div class="bg">
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "App",
  methods:{
    getStudents(){
      axios.get('http://localhost:8080/students').then(
          response=>{
            console.log("请求成功了,",response.data)
          },
          error=>{
            console.log("请求失败了，",error.messages)
          }
      )
    }
  }
}
</script>

<style lang="less">

</style>

在这里插入图片描述
缺点：1.只能代理一个服务器 2.若8080自身有的文件，不会再去请求服务器了，直接从自身上找
例子：
在这里插入图片描述
在这里插入图片描述

代理服务器开启：方式二
// 开启代理服务器：方式二
  devServer:{
    proxy:{
      '/view':{
        target:'http://localhost:5000',
        pathRewrite:{'^/view':''}, //路径重写，将/view路径覆盖成空
        ws: true, //用于支持websocket，默认为true
        changeOrigin:true, //用于控制请求头中的host值（是否跨域）,默认为true
      },
      //简写
      '/demo':{
        target:"http://localhost:5001",
        pathRewrite: {'^/demo':''},
      }
    }
  }
server1.js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	console.log('请求来自于',request.get('Host'));
	console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})
server2.js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})

app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})

app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages:{
    index:{
      //入口
      entry: 'src/main.js'
    }
  },
  lintOnSave: true,  //关闭语法检查
  // //开启代理服务器:方式一
  // devServer: {
  //   proxy: 'http://localhost:5000'
  // }
  // 开启代理服务器：方式二
  devServer:{
    proxy:{
      '/view':{
        target:'http://localhost:5000',
        pathRewrite:{'^/view':''}, //路径重写，将/view路径覆盖成空
        ws: true, //用于支持websocket，默认为true
        changeOrigin:true, //用于控制请求头中的host值（是否跨域）,默认为true
      },
      //简写
      '/demo':{
        target:"http://localhost:5001",
        pathRewrite: {'^/demo':''},
      }
    }
  }
})
App.vue
<template>
  <div class="bg">
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车的信息</button>
    <button @click="getLocal">请求本机上的学生文件（不走代理）</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "App",
  methods:{
    getStudents(){
      axios.get('http://localhost:8080/view/students').then(
          response=>{
            console.log("请求成功了,",response.data)
          },
          error=>{
            console.log("请求失败了，",error.messages)
          }
      )
    },
    getCars(){
      axios.get('http://localhost:8080/demo/cars').then(
          response=>{
            console.log("请求成功了，",response.data)
          },
          error=>{
            console.log("请求失败了，",error.message)
          }
      )
    },
    getLocal(){
      axios.get('http://localhost:8080/students').then(
          response=>{
            console.log("请求成功了，",response.data)
          },
          error=>{
            console.log("请求失败了，",error.message)
          }
      )
    }
  }
}
</script>

<style lang="less">

</style>

在这里插入图片描述

总结：Vue脚手架配置代理

方法一

在vue.config.js中添加如下配置：

devServer: {
    proxy: 'http://localhost:5000'
  }

说明：

  1. 优点：配置简单，请求资源时直接发给前端(8080)即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
方法二

编写vue.config.js配置具体代理规则：

module.exports={
	devServer: {
	   proxy: {
	    '/api1':{
			target: 'http://localhost:5000',  //代理目标的基础路径
			changeOrigin: true,
			pathRewrite:{'^/api1':''}
		 }
		}
	}
}

github案例

静态组件

VillanelleS
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目代理配置
King Saj
12-22 684
此处配置是vue-cli3中！！！ proxy在vue-cli3项目中使用，在vue.config.js配置； 在cli2中使用的是proxyTable在config/index.js 里配置proxyTable内容 vue.config.js配置 module.exports = { devServer: { proxy: { '/dev-api': { // 1.dev-api这个值 的意义在于，声明axios中url已.
vue配置代理
xiaomingzi_12345的博客
07-25 2251
'/api'表示需要代理的接口路径，target属性表示代理的目标服务器地址，changeOrigin属性表示是否改变请求的源地址，pathRewrite属性用于重写请求的路径。上述代码中，我们通过修改axios的默认配置来配置代理。axios.defaults.baseURL表示请求的基础路径，axios.defaults.proxy表示代理的配置，包括代理服务器的地址、端口和协议。需要注意的是，配置代理服务器时需要注意跨域问题，并且在开发环境中生效，在生产环境中需要使用其他方式进行代理配置。
【vue】 配置代理、解决跨域问题
热门推荐
liangjiayy的博客
10-11 2万+
尚硅谷视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=95axios官网教程：https://axios-http.com/docs/introvue配置代理：https://cli.vuejs.org/zh/config/#devserver-proxy安装axios发送ajax请求： 使用：(官网：https://axios-http.com/docs/example)也就是： 官网：https://cli.vuejs.org/zh/config/#de
vue本地配置https代理
最新发布
Daoyiyun的博客
07-16 657
今天给大家分享一种不那么普遍但非常有效的 HTTPS 代理配置方法。
Vue 配置代理
m0_75026936的博客
04-12 1001
跨域是两个不同端口的服务器进行发送和返回请求这是因为浏览器为了保护网站不被破坏，开启了同源策略，不同端口服务器进行数据交互会被浏览器进行拦截。
解决vue中使用proxy配置不同端口和ip接口问题
10-16
在使用Vue开发项目的过程中，我们经常会遇到需要配置代理以解决跨域请求问题。当后端接口位于不同的IP地址和端口时，通过配置代理来模拟这些接口的环境尤为重要。本文将详细介绍如何在Vue项目中使用proxy配置不同...
Vue-cli解决跨域问题--配置代理服务器
linmuqi0928的博客
04-18 1388
前置知识 常用发送ajax请求方式 1.xhr ：new XMLHttpRequest() 真正开发中不常用，一般都是对xhr进行二次封装 2.jQuery（对xhr的封装） 核心是对DOM操作，在Vue中引入不合适（Vue的核心就是减少DOM操作） 3.axios（对xhr的封装） 最推荐！！！ 是promise风格 支持请求拦截器 和响应拦截器 体积小 大约是jQuery的1/4 4.fetch 和xhr是平级的，是js里面内置的方法，可以直接new fetch 但是fetch.
Vue | Vue中的Ajax【vue脚手架配置代理服务器 + github案例 + slot插槽 】
不爱吃菜的菜菜的博客
07-21 723
说明文档https//cli.vuejs.org/zh/config/#devserver-proxy。前后端交互通常需要跨域，常用的跨域方法有cors、jsonp、代理服务器。当你请求的资源8081本身就有，他就不会把请求转发给5000。然后再把原先请求的地址改一下，就可以请求到跨域的数据了。注意不能灵活的控制请求是否走代理。然后把脚手架给停掉，然后重新启动。vue脚手架可以通过。步骤一开启代理服务器。............
Vue proxyTable配置多个接口地址,解决跨域的问题
10-14
Vue CLI 提供了一个解决方案，即通过 `proxyTable` 配置来代理API请求，从而规避跨域限制。 `proxyTable` 是 Vue CLI 的 webpack 配置中的一个部分，用于在开发服务器上设置代理规则。当我们在本地开发时，可以通过...
vue设置代理
qq_40820382的博客
02-01 665
参考这个 https://www.jianshu.com/p/5ef2b17f9b25 1、介绍 这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。 2、实际代码 我的 api=’/rng’ 我的请求地址 ${api}/xxxx/xxx ，请求地址就为 ‘/rng/xxxx/xxx’ 当node服务器 遇到 以 ‘/rng’ 开头的请求，就会把 target 字段加上，那么我的请求地址就为 http://
vue代理配置
leiax00
03-27 395
对于调试阶段，需要多个服务之间进行api调用，配置代理可以方便的解决该问题；介绍两种代理方式。 vue.config.js配置代理 配置方式参见： module.exports = { /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ /* baseUrl: process.e...
Vue技术——配置代理
qq_43595018的博客
12-26 1001
请看---跨域产生的原因以及解决方案总给一下：就是。
如何在Vue中配置代理服务器（详解）
A_adadada的博客
11-02 1万+
但是这样会有缺陷，如果你请求的资源本地就有，他会直接返回本地的数据，而不会向服务器发送请求，所以建议大家还是用方式1，虽然麻烦，但是可以配置多个代理，也不会出现资源直接从本地返回的情况。上述代码中，我配置一个匹配所有前缀为/api的请求，也就是所有以/api为头的请求都会走我上面配置的代理，向。我们可以利用axios的二次封装，给所有的请求都添加上/api这个前缀（这个前缀是可以随意命名的）当然还有更加简洁的做法，让所有的请求都走代理，而并不去匹配请求的前缀。此时我们点击按钮发送的请求为。
Vue配置代理
无心
08-02 2846
Vue配置代理详解
vue项目配置代理
Mr_Wangkk的博客
07-15 781
vue项目配置代理
Vue项目配置代理
qq_35095247的博客
09-27 424
Vue项目配置代理 由于使用vue项目进行开发web浏览器项目，在与后端进行接口联调的时候会遇到跨域的问题。所以需要进行接口url代理。 1.若是vue-cli 2.x版本构建的项目在config/index.js中添加以下代码： 2.若是在vue-cli 3.x构建的项目中，则在自己建立的vue.config.js文件下加入上图配置。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值