关于前端解决post跨域的问题

原创 2018年04月16日 15:28:53

       网上post跨域解决的问题方案一箩筐,但是真正能用得上的我还真是一个没看到,基本上都是基于jsonp的方案去解决跨域的问题,jsonp的原理我就不讲了,网上介绍的多了去了,既然是jsonp了,那还谈什么post跨域问题了,一群标题党,来自一个查了一天百度及论坛人的吐槽....


      好了,言归正传,在具体说解决办法之前我先说一下为什么会有跨域的问题,post跨域问题本身是因为请求的域名和用于请求的机器域名不一致造成的,例如我本地是127.0.0.1域名,请求的是192.168.50.11,在Network里面可以看到会接受到返回值,但是控制台会报请求头不一致的跨域问题,是因为浏览器对后台返给我结果进行了检测,发现两个环境域名不一致,所以解决的办法就是后台在接受到请求的时候,在返回头信息里面加入指定域名可访问或者所有域名都可以访问就可以,这样后台接收到请求之后的返回头里面就指定了对比的请求头,所以前端就能收到返回值了。




       这是正常的ajax请求,后台并没有添加过滤器的方法,在返回头信息里面并没有指定所有域名可以访问,浏览器默认就会去检测请求头的域名和返回头的域名是否一致,不一致则会报请求头的错误了。


        这个是加上过滤方法之后的返回头信息,具体作用看图片即可。

因为我所在的开发环境后台是用java开发的,所以我给出一套java代码的过滤方法:

                response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Method", "*");
response.addHeader("Access-Control-Allow-Headers","Content-Type");
response.addHeader("Access-Control-Max-Age", "3600");

其余的后台开发语言需要自己想办法查一下了。

纯前端解决post跨域的问题方法倒还有一种,但是有的机器好使有的不好使,具体原因我还正在测试,这里先把方法给你们,可以自行测试,后续我测试完之后会把信息在发布,到时候记得看一下。

先说一下前端解决跨域的原理,既然我们知道了跨域的原因是出在了浏览器自动检测的身上,那能不能想办法把浏览器的自动检测关闭或者修改了呢,所以这也就是第二种方法了。(虽然还是和前端没啥关系.....)

找到你所测试使用的浏览器文件目录,右键文件所在位置


将文件目录复制,然后打开cmd控制台,cd查找目录,进入之后将这行代码粘贴执行即可。

chrome –disable—web-security  –user-data-dis=g:temp3


如果你是用的360浏览器的话。

 360se –disable—web-security  –user-data-dis=g:temp3 

这里输入的是exe的文件名,别的浏览器都是一样的操作方式,我这里现在测试是chrome不生效,360生效会提示


火狐及其他浏览器还没测试,后期测试完之后我会放上来测试结果。


第一种方式算是行内大众化的解决方案了,而且和前端P关系没有.....如果你有其他的解决方案欢迎留言,大家一起交流互涨知识。


ajax POST跨域请求完美解决

方式: js前端请求: function getOcrInfo(imageData){ $.ajax({    url: 'http://localhost:8080/LSWS/ws/ocr/...
  • danfeixia
  • danfeixia
  • 2017-05-11 00:32:48
  • 14984

深入理解前端跨域方法和原理

前言 受浏览器同源策略的限制,本域的js不能操作其他域的页面对象(比如DOM)。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操...
  • kongjiea
  • kongjiea
  • 2015-03-11 16:44:00
  • 32296

前端跨域时的post与get问题

问题:在前端跨域时如果使用post提交会被自动转为get方式,这是因为跨域所使用的数据格式为jsonp。 解决办法:不使用jsonp,其他方法稍后更新...
  • sir1241
  • sir1241
  • 2017-09-11 21:03:39
  • 120

前端跨域详解

同源策略同源策略(Same Origin Policy)是浏览器最核心也是最基本的安全功能。浏览器的同源策略,限制了来自其他源的document或脚本,读写当前document的属性。如果没有同源策略...
  • sysuzhyupeng
  • sysuzhyupeng
  • 2017-03-08 21:12:16
  • 402

前端跨域数据访问

术语同源请求URL拥有相同protocol、host、port。参考Table 1 同源举例。用户认证(User Credential)在CORS中,用户认证指cookies, HTTP基本认证,客户...
  • woxueliuyun
  • woxueliuyun
  • 2015-04-26 22:20:42
  • 4175

前端AJAX请求跨域时遇到的一些坑

转自:https://icewing.cc/post/about-cross-origin.html Access-Control-Allow-Origin的问题Access...
  • csCrazybing
  • csCrazybing
  • 2017-03-18 15:19:15
  • 2515

关于前端解决post跨域的问题

       网上post跨域解决的问题方案一箩筐,但是真正能用得上的我还真是一个没看到,基本上都是基于jsonp的方案去解决跨域的问题,jsonp的原理我就不讲了,网上介绍的多了去了,既然是json...
  • baidu_38027860
  • baidu_38027860
  • 2018-04-16 15:28:53
  • 28

前端跨域方法之window.PostMessage

一、window.PostMessage适用于同一页面的不同窗体内跨域通信。该方法允许跨窗口通信,不论这两个窗口是否同源。二、举例来说,父窗口http://127.0.0.1:3000/index.h...
  • WEB_YH
  • WEB_YH
  • 2018-02-24 18:34:27
  • 18

构建前端开发环境之----使用express处理POST跨域请求

回顾在上次的 [文章](http://blog.csdn.net/christeer/article/details/51347548)中,实现了 开发环境的简单的jsonp 处理,但是只能处理 GE...
  • christeer
  • christeer
  • 2016-06-26 12:20:26
  • 2243

Web前端面试指导(四十六):你了解跨域请求吗?

题目点评 主要考察对web安全是否有接触 ,关于安全方面的在面试时是经常被问到的。同一个意思可能问法也不同,比如说:“你对跨域了解吗?”“什么是跨域请求了?”其实都是同一个意思,回答思路可以先回答什...
  • lxcao
  • lxcao
  • 2016-10-27 17:05:04
  • 2868
收藏助手
不良信息举报
您举报文章:关于前端解决post跨域的问题
举报原因:
原因补充:

(最多只允许输入30个字)