axios跨域请求 vue vue使用axios跨域

转载

angel 2023-07-04 02:18:09

文章标签 axios跨域请求 vue ajax vue.js 代理服务器 ios 文章分类 iOS 移动开发

一、使用axios发送ajax请求

1、在项目工程根目录中安装全局axios

npm i axios -g

2、在App组件中发送ajax请求

在浏览器控制台中查看即可

<template>
    <div>
        <button @click="getJoke">获取笑话段子信息</button>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'App',
        methods: {
            getJoke() {
                axios.get('https://api.apiopen.top/getJoke')
                    .then(response => console.log(response.data),
                        error => console.log("请求失败"))
            }
        },
    }
</script>

二、使用vue脚手架配置代理服务器解决【跨域问题】

1、配置【单个】proxy（方法一）

1、vue.config.js文件源码（如果vue项目根目录中没有就新建一个）

module.exports={
	// 开启一个代理服务器，proxy指向5000端口
	devServer:{
		proxy:'http://localhost:5000'
	}
}

2、学生服务器源码（这里使用的是express框架）

// 1、引入express
const express = require('express')
// 2、创建实例对象
const app = express()

// 3、设置get请求
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)
})

// 4、设置服务器端口且进行监听
app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

3、App组件源码

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

<script>
	// 引入axios
    import axios from 'axios'
    export default {
        name: 'App',
        methods: {
            getStuInfo() {
                // 代理服务器方法一。（针对某一个端口跨域）
                /**
                 *  1、localhost:8080 指向的是本地的public文件夹，
                 * 如果public文件夹中有students文件会优先访问本地同名的静态资源（即：前端资源），而不是去请求proxy服务器。
                 *  
                 * 2、在这里因为同源策略，无法跨域请求数据。
                 * 解决的办法有两种：
                 * 		1.使用nginx技术 
                 * 		2.使用vue-cli配置设置代理服务器。
                 * 	这里使用的vue脚手架的config文件设置的代理服务器。
                 * 因为代理服务器与我们的端口号一致(8080)且设置proxy指向了5000端口号，
                 * 所以这里我们访问的是8080端口的students文件，通过代理服务器去请求，这样就解决了跨域。
                 */
                axios.get('http://localhost:8080/students')
                    .then(response => console.log(response.data),
                         error => console.log("请求失败"))
          }
    }
</script>

单个代理服务器配置
优点：配置简单，请求资源时直接向前端（8080）发送请求即可。
缺点：不能配置多个代理，只能指定一个端口。
工作方式：向前端发送ajax请求，当本地静态资源（vue项目中的public文件）里不存在同名文件时，转向代理服务器。由代理服务器发送到目标服务器。

2、配置【多个】proxy（方法二）

1、vue.config.js文件源码（如果vue项目根目录中没有就新建一个）

module.exports = {
  // 开启代理服务器（方法二）
  devServer: {
    proxy: {
    	// 1、学生信息proxy
      '/stuInfo': {
      	// 目标服务器
        target: 'http://localhost:5000',
        // 路径重写，用正则表达式去除前缀
        pathRewrite:{'^/stuInfo':''},
        /**
         * 当changeOrigin为true时，目标服务器收到的地址是localhost:5000。
         * 当changeOrigin为false时，目标服务器收到的地址是localhost:8080。
         * 本地端口当然是8080，为了跨域我们设置的代理服务器端口是5000。（不设置该option也默认为true）
         * 作用: 伪造一个端口号给目标服务器. 
         */
        changeOrigin: true
      },
      
      // 2、汽车信息proxy
      '/carInfo': {
        target: 'http://localhost:5001',
        pathRewrite:{'^/carInfo':''},
      }
    }
  }
}

2、学生信息服务器和汽车信息服务器

学生服务器源码

const express = require('express')
const app = express()
// 设置use方法后，当有人向该服务器发送请求时，这里就会在控制台打印出对方的请求host和url。
//  host ---> localhost:8080    url ---> /sutdents
app.use((request,response,next)=>{
	console.log('有人请求学生信息服务器');
	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)
})
// 学生信息服务器的端口号设置的是5000
app.listen(5000,(err)=>{
	if(!err) console.log('学生信息服务器启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

汽车服务器源码

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

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

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

3、App组件源码

<template>
    <div>
        <button @click="getStuInfo">获取学生信息</button>
        <button @click="getCarInfo">获取汽车信息</button>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'App',
        methods: {
            getStuInfo() {
                // 代理服务器方法二（通过前缀判断来执行对应代理）
                /**
                 * 添加前缀发送到代理服务器，proxy收到后匹配前缀，然后分别执行具体操作。
                 * 当然，还需要在代理服务器配置里面重写路径，把收到的路径的stuInfo前缀剔除，
                 * 然后代理服务器将重写的路径(http://localhost:5000/students)发送给目标服务器请求数据。
                 */
                axios.get('http://localhost:8080/stuInfo/students')
                    .then(response => console.log(response.data),
                        error => console.log("请求失败"))
            },
            getCarInfo() {
                axios.get('http://localhost:8080/carInfo/cars')
                    .then(response => console.log(response.data),
                        error => console.log("请求失败"))
            },
        },
    }
</script>