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

正向代理

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

正向代理的原理

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

实现方法

1. 自己实现后端代码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请求数据就行
至此，一个正向代理完成

2. 直接在项目中配置正向代理的规则
   1. 项目根目录下创建一个 vue.config.js 配置文件 并修改配置
   2. 重新启动项目

// 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
      })