Vue解决ajax跨域的问题
作者:凉沫serendipity 发布时间:2024-04-30 10:19:45
(一)什么是跨域
同源请求就是指协议名、主机名、端口号三者一样
跨域请求:是指协议名、主机名、端口号三者有任何一个不一样,而且跨域请求是请求发出去了,服务器接收并返回了结果,只是浏览器没有接收响应结果。跨域如果不进行处理会报错
(二)axios请求
(1)请求方式
xhr方法: new XMLHttpRequest() xhr.open() xhr.send()
jQuery方法: $get $post
axios :(基于Promise风格,现在用的较多)
fetch:(基于Promise风格),fetch的兼容性较差
jQuery和axios 是对 xhr方法的封装,而fetch方法和xhr方法是平级的,都在window对象身上。
(2)如何发送axios请求
1、在vscode终端输入命令 npm axios进行安装
2、在App.vue中进行引入 import axios from 'axios'
3、发送请求
axios.get('url地址').then(
respone=>{
console.log('请求成功了',respone.data)
},
error=>{
console.log('请求失败了',error.message)
}
(三)配置代理解决跨域问题
原理:设置一个代理服务器,它的协议名、主机名、端口号和前端的一模一样,这样前端访问该代理服务器就没有跨域问题了。
当该代理服务器收到前端的请求,再向其他服务器发送该请求,获取数据,之后将数据返回给前端。
(1)方法一:使用vuecli配置代理服务器
1、开启server1服务器
2、vue.config.js:用来配置脚手架的全局配置,在module.exports中加入如下配置
devServer:{
proxy:'http://localhost:5000'
//语法:proxy:'协议名://主机名:端口号'
}
当前浏览器地址端口号为8080,需要向后端端口号为5000的地址请求数据,出现跨域问题,使用代理服务器
3、在终端安装axios,在app.vue中引入axios,再发送get请求
<template>
<button @click="getStudent">获取学生信息</button>
</template>
<script>
import axios from 'axios'
export default {
name:'App',
methods:{
getStudent(){
axios.get('http://localhost:8080/students').then(
respone=>{
console.log('请求成功了',respone.data)
},
error=>{
console.log('请求失败了',error.message)
}
)
},
}
}
</script>
4、请求数据如下
5、用vuecli配置代理服务器的缺点
5.1 当请求的资源代理服务器本身就有,就不会转发请求,public文件夹中的东西就是代理服务器的资源。
例如:请求名称和public文件夹中资源的名称同名就会返回public中的资源,
请求结果为
5.2 只能配置一个请求代理服务器,即只能向一个服务器转发请求
(2)方法二
1、开启两个服务器
2、vue.config.js的第二种配置,可以配置多台服务器,也不会出现public中同名请求错资源问题
devServer: {
proxy: {
'/xkx': {// '/xkx'请求前缀,表示只要请求前缀是/xkx就走代理
target: 'http://localhost:5000',
// 将以xkx开头的请求,将开头的/xkx去掉,否则目标服务器会找不到路径的
pathRewrite: { '^/xkx': '' },
ws: true,//用于支持webscoket//用与向目标服务器说明自己是哪台服务器(即配置请求头host)
// 如果为false则自己是哪台服务器就说是哪台(host为8080)
// 如果为true,则目标服务器是哪台就说自己是哪台服务器(host为5000)
changeOrigin:true
},
// 可以设置多台服务器
'/kk': {
target:'http://localhost:5001',
pathRewrite: { '^/kk': '' },
ws: true,
changeOrigin:true
}
}
}
3、App.vue中发送两个请求
methods:{
getStudent(){
axios.get('http://localhost:8080/xkx/students').then(
respone=>{
console.log('请求成功了',respone.data)
},
error=>{
console.log('请求失败了',error.message)
}
)
},
getCars(){
axios.get('http://localhost:8080/kk/cars').then(
respone=>{
console.log('请求成功了',respone.data)
},
error=>{
console.log('请求失败了',error.message)
}
)
}
}
4、请求数据结果
来源:https://blog.csdn.net/qq_50582468/article/details/129867454


猜你喜欢
- 最近学习Python接口测试,对于接口测试完全小白。大概一周的学习成果进行总结。1.接口测试:目前涉及到的只是对简单单一的接口进行参数传递,
- django配置mysql数据库:1.首先更改django项目文件中的settings.py的数据库配置DATABASES = { &nbs
- 使用python时,程序能运行,但是不能调试,找了半天解决方法,最后此操作分分钟奏效。两种方法:方法一:选中要运行的代码,右键Execute
- 本文主要介绍了Opencv图片生成视频,分享给大家,具体如下:生成视频import random as rdimport cv2 as cv
- 本文实例为大家分享了python爬取网页内容转换为PDF的具体代码,供大家参考,具体内容如下将廖雪峰的学习教程转换成PDF文件,代码只适合该
- USE NBDXMIS CREATE proc TestTimeAnySentence @sql_where varchar(8000) a
- 这个小程序可以自己设定行数和列数进行图片切割import osfrom PIL import Imagedef splitimage(src
- 什么是修改?在SQL中的基本操作就是增删改查,查询语句不会对数据库中的数据进行修改。而其余的三种操作都会对数据库进行修改,不管是什么修改,我
- 创建一个名为templatetags的python module。新建一个名为verbose_name.py的文件。from django
- 本文实例讲述了Python读取sqlite数据库文件的方法。分享给大家供大家参考,具体如下:import sqlite3这是Python内置
- 在使用pymongo时遇到了一个小坑:在Flask框架中,将字典插入mongodb后再返回就报错@app.route('xxxx&#
- 问题(来自Udacity机器学习工程师纳米学位预览课程)用 Python 实现函数 count_words(),该函数输入字符串 s 和数字
- 代码很简单,只是给大家一个思路的,这里就不多废话了,奉上源码:<!DOCTYPE html><html><he
- 最近游戏项目在多个国家上线,每个国家都对应两份儿svn目录(一份是本地策划目录,一份是线上目录)。于是乎维护变得很烦躁。需要先更新本地策划s
- 1.ROOT_URLCONF = '总路由所在路径(比如untitled.urls)'<===默认情况是这样根路由的路
- 本文实例为大家分享了PyQt5实现简单计算器的具体代码,供大家参考,具体内容如下下面我们将介绍使用python的PyQt5图形界面来编写一个
- SQL Server数据库查询优化的常用方法总结:本文中,abigale代表查询字符串,ada代表数据表名,alice代表字段名。技巧一:问
- 涉及到开发桌面程序,尤其是文本处理,剪贴板就很常用,不像 java 中那么烦锁,wxpython 中访问剪贴板非常简单,寥寥几句足以。# 取
- 多线程编程当中, 线程的存在形态比较抽象. 通过前台线程\后台线程, 可以有效理解线程运行顺序.(复杂的多线程程序可以通过设置线程优先级实现
- 1:获取对象的三种方法1)document.getElementById(id);通过对象的属性id来获取;2)element.getEle