正向代理
只能在开发时使用,上线没有用了。原因是开发时的服务是通过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
})