解决Vue前后端跨域问题的多种方式
1 前言
本文主要介绍借助解决Vue前后端跨域问题的几种方式
说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封装或者使用成熟的第三方封装,比如JQuery,axios
本文将会使用axios进行请求
2 axios介绍
既然说到封装了,那就不得不提到axios了,它和JQuery相比,它支持请求拦截器和响应拦截器,并且体积很小,大约是JQuery的四分之一体积,一般在vue项目里面,基本都是使用axios请求
下载axios
想要使用axios,必须先下载它,打开终端,输入
npm i axios
这个库非常的小,安装很快
引入axios
下载完毕之后,就可以引用了
// 引入axios
import axios from 'axios'
3 模拟场景
基本工作做完后,就可以开发前后端代码,模拟跨域场景了
后端接口
后端起一个服务,端口为9090,有一个get请求,先访问下,因为是get请求,可以直接在浏览器访问,所以说接口是没问题的
前端请求
有了后端的接口,我们就可以在前端去请求了,上述已经安装好了axios,所以直接编写代码请求后端接口,通过控制台可以看到,前端的端口是8080
<template><div><button @click="getInfo">获取信息</button></div>
</template><script>// 引入axiosimport axios from 'axios'export default {name:'App', methods:{getInfo(){// 使用axios发送请求(get) 发送请求后会有两个回调axios.get('http://localhost:9090/queryUserInfo').then(// 成功回调success=>{console.log('请求成功!')// 请求成功后的数据console.log(success.data)},// 失败回调error=>{ console.log('请求失败!')// 请求失败原因console.log(error.message)})}}}
</script>
然后发送请求,发现控制台报错了,这是一个很经典的跨域问题
4 发现跨域问题
所谓的跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念:我们认为若协议 + 域名 + 端口号均相同,那么就是同域。
上面的例子就算因为前后端通信的端口不一致造成的跨域问题
常用的解决问题的手段有以下三种
1 cors
2 JSONP
3 代理
我们一一举例说明
5 解决跨域
cors
这种方式是我工作中处理跨域用到最多也是最简单的一种方式,直接通过注解解决跨域问题
cors解决跨域,一般不用于前端做任何事,而是后端或者服务器去操作,其实就是在服务器里面返回相应的时候加几个响应头,某种程度上来说,cors解决跨域才是真正意义上的解决跨域,但是在开发中,这个响应头不是随便配置的,如果随意配置,就会造成一个问题就算任何人都能找服务器要数据,存在一些安全风险
注解解决跨域
在后端的controller或某个具体方法上可以加上@CrossOrigin注解解决跨域
加完注解后,这个时候重启后端服务器再访问,发现问题解决
值得注意的是,@CrossOrigin这个注解默认是解决全部路径的跨域,有时候一些参数需要自己设置,否则可能会有安全隐患
全局配置跨域
如果使用注解,那么我们需要在每一个controller或者方法上都要加上注解才能解决跨域的问题
那么有没有一种一劳永逸的办法呢?
当然有,我们可以使用全局配置跨域,代码如下:
注意:一定不要忘了使用@Configuration注解配置到项目中,否则无效,具体的一些参数或者路径,根据自身需求设置即可
package com.wyh.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsMapping implements WebMvcConfigurer {@Override/*** 重新跨域支持方法* CorsRegistry 开启跨域注册*/public void addCorsMappings(CorsRegistry registry) {//addMapping 添加可跨域的请求地址registry.addMapping("/**")//设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目.allowedOrigins("*")//是否开启cookie跨域.allowCredentials(false)//规定能够跨域访问的方法类型.allowedMethods("GET","POST","DELETE","PUT","OPTIONS")//添加验证头信息 token//.allowedHeaders()//预检请求存活时间 在此期间不再次发送预检请求.maxAge(3600);}
}
以上就是通过cors解决跨域的两种方式
JSONP
除了使用cors解决跨域,还可以使用JSONP,它解决跨域的方式其实挺巧妙的,它借助了script标签li的src属性,在引入外部资源的时候不受同源策略限制的特点办到的,虽然JSONP比较巧妙,但是真正开发中用到的微乎其微,因为想要实现JSONP解决跨域,不仅仅要前端人员要用到特殊写法,后端人员也得配置前端才能实现,并且只能解决get请求跨域问题,相对来说很鸡肋
这里就得吐槽一句了,虽然开发用的少,但是面试就喜欢问你JSONP,就看你知道不知道这个巧
代理
由于篇幅问题,我另外写了一篇文章,大家可以参考:使用Vue脚手架配置代理服务器的两种方式
解决Vue前后端跨域问题的多种方式相关推荐
- SpringCloud(10)—— 国寿i动项目经验之(解决前后端跨域请求技术)
国寿i动项目经验之(解决前后端跨域请求技术): 由于网段原因,导致前端js请求后端服务接口出现跨域,没法实现正常的请求,所以需要对请求进行跨域处理 引入jar: <!-- 解决前后端接口交互跨域 ...
- react-17.x版本,解决跨域问题的多种方式
react最新版本解决跨域问题 废话少说,直接上答案: react测试版本:17.x 后端接口:http://127.0.0.1:9092/user 前端端口:http://127.0.0.1:300 ...
- thinkphp fastadmin 解决vue前后端分离项目的跨域问题 以及 OPTIONS请求类型
fastadmin的专用方法: 修改文件:application/config.php,这是fa的配置文件. 修改属性 cors_request_domain,搜一下就找到了,在里面加上你的域名就行了 ...
- niginx反向代理解决前后端跨域问题
1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...
- 解决前后端跨域问题No‘Access-Control-Allow-Origin‘...
实际工作中遇到了,在此做个笔记,希望能够帮助到遇到此问题的猿友们!!! 目录 问题场景 编辑此时作者后端代码为: 自定义过滤器: WebMvcConfig配置文件: 注入自定义过滤器 解决方法 1. ...
- nginx反向代理node,解决前后端跨域问题
nginx代理某一端口 server {listen 80;server_name www.zhangwenzong.cn;access_log /home/zhangwenzong/pb.haoli ...
- Java后端解决前后端跨域的3种方法
1.在方法上使用@CrocsOrigin注解 2.在配置类包内添加一个返回值为CorsFilter过滤器的配置类 package com.example.springboot.config;impor ...
- vue加跨域代理静态文件404_解决vue本地环境跨域请求正常,版本打包后跨域代理不起作用,请求不到数据的方法——针对vue2.0...
问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传后就无法获得后台的json文件.查看了相关资料可以用nginx进行解决.还可以使用命名环境变量,请求的时候进行判断,话不多说 ...
- 用CORS 解决vue.js django跨域调用
Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的 ...
最新文章
- Golang向Templates 插入对象的值
- LightOJ - 1409 Rent a Car(最小费用最大流)
- redis储存List类型数据
- [大数据]-Fscrawler导入文件(txt,html,pdf,worf...)到Elasticsearch5.3.1并配置同义词过滤...
- TCP传输过程中丢包问题
- 如何利用bat在同一个IE用多个选项卡的方式打开多个网址? 如何利用bat在同一个IE用多个选项卡的方式打开多个网址? 我的网址是这样的http://www.xags.gov.cn:8003/gga
- 养老不用愁,这种机器人可以让老年人自主地进行日常生活
- 有效提高作品率的UI设计技巧,你知道多少?
- 37、我的C#学习笔记3
- java开发个人简历模板_java程序开发个人简历模板
- git命令行操作指南(git指令及使用场景详解及git stash、git branch、git分支关联等)
- U盘防病毒从七方面做起
- PPT打印预览无背景
- Vue-5 路由参数的传递和获取(query 和 params),导航守卫和路由元信息,History模式
- IMAX China去年实现扭亏为盈;华为助力打造成都智算中心;Quantinuum和IBM壮大量子生态系统 | 全球TMT...
- 进程创建-终止-等待-替换
- unexpected EOF while looking for matching ``'
- Web开发前端界面的调转
- python-networkx库的使用1
- 【武汉理工大学】软件工程总复习 知识点整合