前后端分离开发跨域问题
时间:2022-07-26
本文章向大家介绍前后端分离开发跨域问题,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前后端分离开发出现的跨域问题和解决方法
因为之前所在的公司开发模式前后端没有分离,所以在实际的开发中,基本上没有遇到跨域请求的问题,也没有注意相关问题。
问题描述
在前后端分离开发的时候,有的时候,在前端页面请求后台接口,控制到出现跨域错误,但是接口单独测试并无问题
解决方法
1. 前端处理
- 服务调用的时候进行跨域处理(修改请求接口的时候参数类型)
- 正常情况使用ajax调用服务的时候
$("#demo1").click(function(){
$.ajax({
url : 'http://www.tpadmin.top/Index/Test/crossDomain',
data : {},
type : 'get',
success : function (res) {
//No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access. 在执行时候报出的错误,这代表了跨域错误
alert(res);
}
});
});
- 使用jsonp的方式进行接口调用,但是此种方式仅限于GET请求,并且存在过多的约束,一般不推荐
$("#demo2").click(function(){
$.ajax({
url : 'http://www.tpadmin.top/Index/Test/crossDomain',
data : {},
type : 'get',
dataType : 'jsonp',
success : function (res) {
alert(res);
}
});
});
- 使用反向代理的方式处理跨域问题
如果是vue-cli
的项目,在项目的根目录创建全局配置文件 vue.config.js
module.exports = {
// 基本路径
publicPath:"./", // 可以设置成相对路径,这样所有的资源都会被链接为相对路径,打出来的包可以被部署在任意路径
outputDir:"dist", //打包时生成的生产环境构建文件的目录
assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
devServer: {
//代理模式,用于解决接口跨域的问题
proxy: {
'/api': {
//target: 'http://localhost:8001/pm', // 对应自己的接口
target : 'http://114.55.164.189:8001/pm',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '',
},
},
},
}
}
2. 后端处理
- 如果是
springboot
的项目直接在Controller
类上面添加@CrossOrigin
注解jdk
版本要求是1.8以上.
/**
其它的控制层继承该类即可解决跨域问题
*/
@CrossOrigin
public class commonController {
}
- 采用拦截器的方法实现
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Autowired
private EnvConfig envConfig;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new HandlerInterceptor() {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
boolean isTrue = envConfig.getIsDev();//判断是测试服才需要解决跨域问题
if (isTrue) {
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.addHeader("Access-Control-Allow-Headers",
"Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
}
return true;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
Exception ex) throws Exception {
}
});
}
}
- 独家 | 一文读懂TensorFlow(附代码、学习资料)
- 解决openssh漏洞,升级openssh版本
- 解决NTPD漏洞,升级Ntpd版本
- 独家 | 手把手教TensorFlow(附代码)
- HBase Region自动切分细节
- eclipse搭建ssh后台
- 解决mysql漏洞 Oracle MySQL Server远程安全漏洞(CVE-2015-0411)
- im4java包处理图片
- centOS7 mini配置linux服务器(五) 安装和配置tomcat和mysql
- RedisPool操作Redis,工具类实例
- centOS7 mini配置linux服务器(四) 配置jdk
- 老司机教你“飙”EventBus3
- Android listView异步下载和convertView复用产生的错位问题
- 实用Android 屏幕适配方案分享
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 访问tomcat manager应用遇到的403 access denied错误
- 使用ant执行Java代码
- TypeScript 类型注解和类型推断
- 目前解决移动端1px边框最好的方法
- 关于php的引用
- Windows 开机自启 VMware 虚拟机
- Alertmanager 安装与使用
- typedef用法
- LaTex中插入大括号的多行公式
- Latex公式编辑和子公式编辑
- nginx rewrite 跨域
- Oracle删除索引规范
- mysql中走与不走索引的情况汇集(待全量实验)
- C#标准事件流
- 【STM32F407开发板用户手册】第25章 STM32F407的TIM定时器基础知识和HAL库API