教你如何解决vue跨域问题（vue cli3）

1.什么是跨域请求

简单来说就是浏览器中当前网站向另一个网站发送请求获取数据的过程，这就是跨域请求。

2.哪些是跨域请求

1.http://www.test.com/index.html请求http://www.test.com/login（不跨域）
1.域名不同：http://www.test.com/index.html请求http://www.test1.com/login（跨域）
2.端口不同：http://www.test.com:80/index.html请求http://www.test.com:8080/login（跨域）
3.协议不同：http://www.test.com/index.html请求https://www.test.com/login（跨域）
4.localhost和127.0.0.1虽然都指向本机，但也属于跨域

3.vue使用axios如何解决跨域请求

1.在此项目下打开终端，下载安装axios

npm install axios --save

2.在项目的main.js中引入axios，此目的是可以在全局使用axios（调用方式this.axios）

import axios from 'axios'
Vue.prototype.axios = axios

3.在此项目下创建vue.config.js文件，放入如下代码（vue cli3.0无此文件，手动创建）

module.exports = {devServer: {open: true,host: 'localhost',port: 8080,https: false,//以上的ip和端口是我们本机的;下面为需要跨域的proxy: {//配置跨域'/api': {target: 'http://localhost:8081/',//这里后台的地址模拟的;应该填写你们真实的后台接口ws: true,changOrigin: true,//允许跨域pathRewrite: {'^/api': ''//请求的时候使用这个api就可以}}}}
}

4.在login.vue页面编写axios请求

注：vue.config.js定义使用api，所以如果请求http://localhost:8081/user，axios的请求路径应该是’/api/user’

<template><div>{{ newUserId }}</div>
</template><script>
export default {name: "login",data(){return {userId: 'tz',newUserId: null}},created() {this.test()},methods:{test(){const data = {userId: this.userId}this.axios.post('/api/user',data).then(res => {this.newUserId = res.dataconsole.log("this is result:"+res)})}}
}
</script>
<style scoped></style>

5.Java后台代码，使用springboot搭建，默认端口为8081

//controller代码
@RestController
public class hello {@PostMapping("/user")public User hello(@RequestBody User user) {System.err.println("userID"+user);return user;}
}

6.结果：请求成功

7.地址

git地址
csdn下载

教你如何解决vue跨域问题（vue cli3）相关推荐

一行代码解决Vue跨域请求Vue报错:AxiosError
这种错误一般情况下都是域名错误或者跨域权限不够,也就是我们常说的"网络请求跨域错误" 我们首先是核实一下域名是否正确,如果域名正确没有输入错误那就是跨域权限问题了,那我们如何解决呐 ...
Vue 跨域下载或读取文件
image.png 下载文件 export async function download(file_url, file_name) {let res = await Axios({method: & ...
Vue 跨域问题解决
Vue 跨域问题解决 vue框架目录: ProxyTable pathRewrite:是使用proxy进行代理时,对请求路径进行重定向以匹配到正确的请求地址,其中^是正则中限定开头,则是/api为开头 ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
Nginx 解决WebApi跨域二次请求以及Vue单页面问题
Nginx 解决WebApi跨域二次请求以及Vue单页面问题参考文章: (1)Nginx 解决WebApi跨域二次请求以及Vue单页面问题 (2)https://www.cnblogs.com/ji ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...
CORS了解与VUE跨域解决
1.CORS了解 CORS通信得关键地方就是服务器,只要服务器实现了CORS接口,就可以实现跨域通信浏览器将CORS请求分为两大类:简单请求.非简单请求简单请求基本介绍同时满足以下条件就是简单 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
Vue之用户登录功能（六）使用axios解决‘Access-Control-Allow-Origin’跨域
文章目录引入axios 发送Ajax请求解决'Access-Control-Allow-Origin'跨域问题总结引入axios 1.回到vue脚手架工程,输入命令 npm i axios 2 ...