vue/cli创建的项目中做正向代理

2024-06-19 08:29| 来源: 网络整理| 查看: 265

正向代理

只能在开发时使用，上线没有用了。原因是开发时的服务是通过nodejs启动的。

正向代理的原理

浏览器的同源策略引起的跨域，后端代码向服务器请求数据是不会跨域的

实现方法自己实现后端代码3000（端口）实现正向代理 8080 -> 3000 -> http://m.xxxx.xxx // server.js 这是一个nodejs文件 // 这个文件启动之后地址为 http://localhost:3000 // 需要使用 npm 下载 express 和 axios const express = require('express') const axios = require('axios') const server = express() server.use((req, res, next) => { res.set('Access-Control-Allow-Origin', '*') next() }) server.get('/', (req, res) => { // 这里填需要代理的地址 axios.get('http://m.xxxx.xxx').then(response => { const {data} = response res.send(data) }) }) server.listen(3000)

启动这个文件后，前端代码直接向 http://localhost:3000请求数据就行至此，一个正向代理完成

直接在项目中配置正向代理的规则项目根目录下创建一个 vue.config.js 配置文件并修改配置重新启动项目 // vue.config.js module.exports = { devServer: { proxy: 'https://m.xxx.com' // 这里写一个域名就好是目标地址 } }

然后在你发请求的页面发请求时把 https://m.xxx.com 换成 http://localhost:8080(项目启动的本地地址)

// 会产生跨域的写法 Axios.get('https://m.xxx.com/api/v1/activities/hottest').then(res => { const Dates = res.data this.SearchData = Dates }) // 没有跨域的写法 // 当本地是8080端口时，你这样写没有问题 // 当本地是9090端口时，你就要改成9090 // 不推荐这种写法 Axios.get('http://localhost:8080/api/v1/activities/hottest').then(res => { const Dates = res.data this.SearchData = Dates }) // 没有跨域的写法 // 这样写的话无论你项目的本地地址是不是 8080端口都没有问题 // 推荐这种写法 Axios.get('/api/v1/activities/hottest').then(res => { const Dates = res.data this.SearchData = Dates })

【本文地址】

公司简介

联系我们