正文

前端-关于cors跨域的解决方案，面向服务端

江湖月影  江湖月影  2022-09-17  275

关键词：

最近自己在写后台管理系统的时候，并没有采用jsp、freemaker、叶子等模板技术，而是由后端提供数据api，前端通过AJAX和JQuery来动态操作页面上的一些div、table元素，从而实现报表的动态加载。

因为本人并非专业前端，所以采用的技术比较古老，对于最近的前端框架，vue,angular,react等等,暂且按下不表。

说说遇到的几个坑：

1、AJAX发送请求的时候，默认是异步的，而不是同步的。

基于低耦合的编码，我在写ajax时，数据请求和数据处理是分开的，没加同步执行就导致了我的请求发送后，没有拿到回调的数据就已经开始执行数据处理了。

2、关于非同源链接发送异地址的请求，也就是CORS，跨域问题。

浏览器出于安全考虑，限制了JS发起跨站请求，使用XHR对象发起请求必须遵循同源策略（SOP：Same Origin Policy），跨站请求会被浏览器阻止，这对开发者来说是很痛苦的一件事，尤其是要开发前后端分离的应用时。

在现代化的Web开发中，不同网络环境下的资源数据共享越来越普遍，同源策略可以说是在一定程度上限制了Web API的发展。

关于跨域问题，只要用ajax来发送请求都会遇到。上个月一直在做一个小程序应用的后端服务接口，前端的朋友并没有和我放映有跨域问题，估计是小程序底层做了比较良好的封装，或者底层并不是使用简单的ajax请求，从而规避了这个问题。

前端如果解决的话，无非就是jsonp，加请求头，但是这样会增加前端同事的工作量。

我的解决方案是在后端解决：

（1）最简陋的方法，在后端web中添加一个filter，这个filter要的过滤顺序放在最前面，将对应的HTTP请求加上一个请求头。

 1 /**
 2  * 解决跨域问题
 3  * Created by huxingyue on 2017/8/31.
 4  */
 5 @WebFilter(filterName = "CORSFilter")
 6 public class CORSFilter implements Filter {
 7     public void destroy() {
 8     }
 9 
10     public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
11         HttpServletResponse response = (HttpServletResponse) resp;
12         response.setHeader("Access-Control-Allow-Origin", "*");
13         response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
14         response.setHeader("Access-Control-Max-Age", "3600");
15         response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
16         chain.doFilter(req, resp);
17     }
18 
19     public void init(FilterConfig config) throws ServletException {
20 
21     }
22 
23 }

（2）使用@CrossOrigin注解

 1 @RestController
 2 @RequestMapping("/account")
 3 public class AccountController {
 4 
 5     @CrossOrigin
 6     @GetMapping("/{id}")
 7     public Account retrieve(@PathVariable Long id) {
 8         // ...
 9     }
10 
11     @DeleteMapping("/{id}")
12     public void remove(@PathVariable Long id) {
13         // ...
14     }
15 }

这是一个很简单的示例，官方参考文档还有更加全面的示例。

 1 <mvc:cors>
 2 
 3     <mvc:mapping path="/api/**"
 4         allowed-origins="http://domain1.com, http://domain2.com"
 5         allowed-methods="GET, PUT"
 6         allowed-headers="header1, header2, header3"
 7         exposed-headers="header1, header2" allow-credentials="false"
 8         max-age="123" />
 9 
10     <mvc:mapping path="/resources/**"
11         allowed-origins="http://domain1.com" />
12 
13 </mvc:cors>

参考文档：http://spring.io/blog/2015/06/08/cors-support-in-spring-framework

（3）使用第三方CORSFilter

官网：http://software.dzhuvinov.com/cors-filter.html

3、AJAX发送post请求，数据为json时，data对应的内容应该是json字符串，而不是json字符串

参考资料：

http://start.spring.io/

http://www.jianshu.com/p/d05303d34222

前端跨域的三种解决方案

1.CORS跨域　　前端不动后端配合　　像调用正常的接口一样调用接口，通过后端修改配置使得站点能够访问 2.JSONP跨域（github网址：https://github.com/webmodules/jsonp)　　前端适配(安装jsonp插件) 后端配合 3.接口代理　... 查看详情

web前端跨域的一些解决方案

参考技术A没有归纳之前对跨域的一些说法是模糊的，什么jsonp啊，跨域原理啊，心里只有一个大概的说法，知道这个东西，然后用的时候直接百度Ctrl+C，后来闲下来决定整理一波这些知识点，需知其所以然。那么，其实这是浏览... 查看详情

前后端分离django解决跨域的问题(代码片段)

现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持否则前端无法使用axios无法请求后端提供的api数据，我们使用CORS来解决后端对跨域访问的支持。使用django-cors-headers扩展在Response(headers="Access-Control-Allow-Origi... 查看详情

关于websocket跨域的一个奇怪问题

...求，从而克服了AJAX只能同源使用的限制。CORS基于http协议关于跨域方面的规定，使用时，客户端浏览器直接异步请求被调用端服务端，在响应头增加响应的字段，告诉浏览器后台允许跨域。概括的说，CORS就是服务端对跨域权限... 查看详情

cookie在多域名下的跨域解决办法

...kie的同源正常读写问题。备注：这里就不详细讲解跨域的解决方案。上述，只要是前后端分离，都需要配置跨域的cors的二级域名。spring.domain=abc.com;51.com;xx.comspring.corsOrigins=http://m.abc.com; 查看详情

前端跨域如何解决？

...拿到我们的信息去做坏事在团队的配置中，我们为了减少前端对后端的依赖，提高开发效率，使前后端职责更清晰等等因素，我们不得不面对跨域的问题，那我们该怎么解决呢？1、JSONP原理：浏览器对script的资源引用没有同源限... 查看详情

跨域cors(代码片段)

跨域CORS当开发前后端分离项目时，前端的静态服务器和后端服务器基于不同的域名，这就触发了浏览器的同源策略，导致js(ajax/axios)代码不能访问后端请求我们为前端和后端分别设置了两个不同的域名位置域名前端www.xxx.site后端... 查看详情

00，跨域的问题

什么是跨域？浏览器的同源策略限制默认情况下前端页面和后端服务在不同服务器（域名、端口不一样）时，前端页面js无法请求到后端接口服务，即存在跨域问题。DRF是怎么解决跨域问题？使用Jsonp方式解决使用cors解决使... 查看详情

vue--代理方式跨域

正向代理与反向代理前端使用代理主要用于跨域请求，关于跨域：常用的方式JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制&n... 查看详情

前端跨域的解决方式

前端与服务端数据交互时，涉及到跨域的一些问题。JavaScript出于安全的考虑，禁止了跨域调用其他页面的对象，也即同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。什么是跨域？如... 查看详情

跨域的三种解决方式

跨域问题跨域问题对于WEB前端工程师来说是比较重要的一个问题，因为我们时常需要去解决这样的问题，在其他类型的前端开发来说，他们并没有跨域问题跨域问题的产生因为浏览器有同源策略：只有在同域名，同端口，同协议... 查看详情

跨域与前后端分离(代码片段)

...关于跨域的文章几乎每个文章都会有这么一个图和这几个解决方案只要是跟当前页面所在url不同的请求都属于跨域请求，为什么我可以访问cdn或者引入其他网站的js或者css或者图片，那是因为src这个标签是支持跨域的，你用ajax去... 查看详情

跨域解决方案-node转发(代码片段)

...域理解成为webpackdevServer原理的实现2.代理转发参见:跨域解决方案-webpackdevServer.md3.node转发解决跨域问题express(app.js)constexpress=require(‘express‘)constlog=console.log.bind(console)constapp=express()//cors模块用来解决跨域问题,只要声明了cor，就... 查看详情

如何解决前端跨域问题？

...设置允许跨域。现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。参考技术B这个前端跨域看... 查看详情

如何用cors来解决js中跨域的问题

参考技术A1、CORS的原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。2、tomcat如何配置cors的跨域... 查看详情

zuul+security跨域cors问题解决(代码片段)

...决起来也是有心无力。这里介绍的是zuul配置了跨域，在前端调用仍然会出现跨域的问题。一般没有权限的接口加上cors配置就会通过跨域的问题。不过在服务间调用具有权限的功能，莫名的报跨域问题。post特殊请求在解决问题时... 查看详情

解决ajax跨域的办法，代理，cors，jsonp

1、使用php做代理去请求第三方api接口 php是可以跨域的，我们利用ajax请求本域名中的php文件，php再去请求第三方接口文件，从而达到跨域目的。 php做代理请求： ajax请求本域名php代理文件：请求结果：成... 查看详情

正文