环境准备

首先我们要借助axios发送Ajax，axios安装命令：npm i axios

其次准备两台服务器，这里使用node.js+express搭建
server1

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

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	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

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的跨域问题

我们知道vue脚手架默认是在localhost：8080这个端口运行，而我们需要访问上面两台服务器，一般来说请求会被CORS策略阻止

  <div>
    <button @click="getStudents">获取学生信息</button>
    <button @click="getSCars">获取汽车信息</button>
  </div>

	getStudents(){
      axios.get('http://localhost:5000/students').then(
          response => {
            console.log('请求成功',response.data)
          },
          error => {
            console.log('请求失败',error.message)
          },
    getSCars(){
      axios.get('http://localhost:5001/cars').then(
          response => {
            console.log('请求成功',response.data)
          },
          error => {
            console.log('请求失败',error.message)
          }
      )
    }
      )

使用node server1.js启动服务器server1
node server2.js启动服务器server2

浏览器正常访问
访问server1
在这里插入图片描述
访问server2

vue跨域访问，被CORS策略阻止
在这里插入图片描述

vue跨域问题解决方案

Ajax跨域问题有很多解决方案，在后端解决方案有设置响应头，jsonp等等，具体参考：AJAX跨域问题及解决方案

vue脚手架提供一种解决方案，那就是使用代理服务器代理发送请求

发送请求方：localhost:8080
那么代理服务器跟发送方保持一致：localhost:8080
接收请求方：localhost:5000
那么形成
发送请求  发送方8080--->代理方8080--转发-->接收方5000
响应  接收方5000--响应-->代理方8080--转发-->发送方8080
根本原因是因为代理服务器8080与服务器5000相互访问是使用http协议，这就类似与浏览器访问服务器5000一样

方式一

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

  devServer: {
    proxy: 'http://localhost:5000' //要跨域域名
  }

	getStudents(){
      /*axios.get('http://localhost:5000/students').then(*/
      //方式一
      axios.get('http://localhost:8080/students').then(
          response => {
            console.log('请求成功',response.data)
          },
          error => {
            console.log('请求失败',error.message)
          }
      )
    }

在这里插入图片描述
优缺点：

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

局限性：
若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
例如我在public创建与路径students相同名称的文件夹
请添加图片描述

那么再次请求学生资源时就会优先匹配文件students的内容
在这里插入图片描述

方式二

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

devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:5000',
        //ws: true,//用于支持websocket
        //changeOrigin: true //用于控制请求头的host值，默认为true，表示请求头host值为要访问服务器的值（我就是你），当为false时，表示请求头host值为要代理服务器本身的值（我就是我）
        pathRewrite: {'^/api1': ''}//重写请求，用正则表达式匹配
      },
      '/api2': {
        target: 'http://localhost:5001',
        pathRewrite: {'^/api2': ''}
      }
    }
  }

    getStudents(){
      /*axios.get('http://localhost:5000/students').then(*/
      //方式一
      /*axios.get('http://localhost:8080/students').then(*/
      //方式二
      axios.get('http://localhost:8080/api1/students').then(
          response => {
            console.log('请求成功',response.data)
          },
          error => {
            console.log('请求失败',error.message)
          }
      )
    },
    getSCars(){
      axios.get('http://localhost:8080/api2/cars').then(
          response => {
            console.log('请求成功',response.data)
          },
          error => {
            console.log('请求失败',error.message)
          }
      )
    }