什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域

前段时间接触一个新的项目,原本想着做成前后端分离的,但是这样就会涉及到 ajax 跨域的问题,那时候没解决,所以就没搞前后端分离,但是今天的项目又接触到跨域(前后端分离的问题),研究了一晚上,查了很多资料,也跟一些前辈沟通过,用的方法都不同,

有人说用谷歌的插件,有人说用Nginx 做个反向代理,更有人说,用 JSONP 的方式,这这些个方法都可行,可是操作难度有点大啊,第一个先不说,要翻墙出去才能下载安装,第二个,对于很多新手来说,更是难以理解,

第三个, JSONP 只能是使用 get 方式请求数据,可是我们用 get 方式去请求数据的,这都是少数情况吧?所以,我综合了一下,希望能帮到更多的小伙伴!

这个配置允许跨域完全是在我们 后台的事,跟前端无关,我所用的后端框架是 SSM (其实也就是 Spring 的问题),其他框架的,请绕道!!!!(有接触 Nutz 框架的,这个框架的跨域更加简单,加一个注解就行了:@Filters(@By(type=CrossOriginFilter.class)))

好了,废话多了,言归正传,其实就 三部曲 就可以了,

1. 新建一个过滤器,并实现 Filter 接口

请注意导包!!!!

public class SimpleCORSFilter implements Filter {


private boolean isCross = false;

@Override
public void destroy() {
isCross = false;
} @Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
if (isCross) {
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
System.out.println("拦截请求: " + httpServletRequest.getServletPath());
httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
httpServletResponse.setHeader("Access-Control-Max-Age", "0");
httpServletResponse.setHeader("Access-Control-Allow-Headers",
"Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpServletResponse.setHeader("XDomainRequestAllowed", "1");
}
chain.doFilter(request, response);
} @Override
public void init(FilterConfig filterConfig) throws ServletException {
String isCrossStr = filterConfig.getInitParameter("IsCross");
isCross = isCrossStr.equals("true") ? true : false;
System.out.println(isCrossStr);
}

}

2. 在web.xml中设配置

<!-- 跨域请求 -->
<filter>
<filter-name>SimpleCORSFilter</filter-name>
<filter-class>com.ssm.util.SimpleCORSFilter</filter-class>
<init-param>
<param-name>IsCross</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>SimpleCORSFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

3. 在 StringMVC 的配置文件中配置跨域请求

<!-- 接口跨域配置 -->
<mvc:cors>
<mvc:mapping path="/**"
allowed-origins="*"
allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
allow-credentials="true" />
</mvc:cors>

Spring MVC 的跨域配置,到此结束,前端不用改任何东西,正常的使用 ajax 即可

转载:https://www.cnblogs.com/xjbBill/p/8278032.html

每天学习一点点,菜鸟的进阶之路。

SSM框架处理跨域问题的更多相关文章

  1. Django框架 之 跨域请求伪造

    Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...

  2. 解决使用elementUI框架el-upload跨域上传时session丢失问题

    解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依 ...

  3. 关于laravel框架的跨域请求/jsonp请求的理解

    最近刚接触laravel框架,首先要写一个跨域的单点登录.被跨域的问题卡了两三天,主要是因为对跨域这快不了解,就在刚才有点茅塞顿开的感觉,我做一下大概整理,主要给一些刚接触摸不着头脑的看,哪里写得不对 ...

  4. Python之Flask和Django框架解决跨域问题,配合附加ajax和fetch等js代码

    Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...

  5. drf框架之跨域问题的解决与缓存问题

    什么是跨域问题呢: 1. 跨域问题: CORS 跨域资源共享: 有简单请求 和非简单请求 简单请求: 只要符合如下两条,就是简单请求,否则则是非简单请求 (1) 请求方法是以下三种方法之一: HEAD ...

  6. express框架之跨域请求

    express.js跨域请求代码如下: app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Or ...

  7. zepto,kissy前端框架实现跨域

    三.jsonp的原理:带有src属性标签的跨域资源获取能力,在jsonp中通常使用<script>标签,因为<script>标签获取的跨域资源可以使用回调函数直接处理 json ...

  8. python bottle框架 解决跨域问题的正确方式

    经查询,网上有几种说法 https://www.cnblogs.com/EmptyFS/p/6138923.html 我首先查到的就是这个,我采用了文中所说的修改源码的方式, 但是经测试发现,修改源码 ...

  9. jeecg框架解决跨域问题

    controller层方法体中添加如下代码 response.setHeader("Access-Control-Allow-Origin", "*");res ...

随机推荐

  1. POJ1733

    题目链接:https://vjudge.net/problem/POJ-1733 解题思路:并查集+离散化 AC代码: #include <iostream> #include <c ...

  2. vue实现对文章列表的点赞

    今天要做一个对文章点赞的功能,实现后的样式如下,点赞后的文章下面的大拇指图标会变红,并且点赞数加1 一开始分别遇到过两个问题:1.点文章中的一个赞,所有文章的赞全部变红了 2.点赞后,虽然当前文章的赞 ...

  3. 蒲公英 · JELLY技术周刊 Vol.08 -- 技术周刊 · npm install -g typescript@3.9.3

    登高远眺 沧海拾遗,积跬步以至千里 基础技术 官宣: Typescript 3.9 正式发布 TypeScript 3.9 正式发布,这个版本主要聚焦于性能.改进某些特性和提升稳定性.编译器效率在这一 ...

  4. PowerDesigner使用教程(二)

    在PowerDesigner使用教程(一)中已经介绍了基本用法,下面介绍一些使用技巧. 1.  生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路 ...

  5. html2canvas.js插件截图空白问题

    发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...

  6. [Unity2d系列教程] 004.Unity如何调用ios的方法(SDK集成相关)

    和上一篇类似,我们同样希望Unity能够直接调用IOS底层的代码,那么我们就需要研究怎么去实现它.下面让我来带大家看一个简单的例子 1.创建.h和.m文件如下 .h // // myTest.m // ...

  7. 重学 Java 设计模式:实战单例模式

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 5个创建型模式的最后一个 在设计模式中按照不同的处理方式共包含三大类:创建型模式.结 ...

  8. 关于react中antd design pro下面src/models

    1.src/models 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: 1.UI 组件交互操作: 2.调用 model 的 effect: 3.调用统一管 ...

  9. Java-接口(另类抽象)

    1.1 特点 用interface定义 接口中所有成员变量都默认是由public static final修饰的 接口中所有方法都默认是由public abstract修饰的 接口没有构造器 接口采用 ...

  10. Alpha冲刺 —— 5.4

    这个作业属于哪个课程 软件工程 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 Alpha冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.会议内容 1.展 ...