解决前端post跨域问题

转自:https://blog.csdn.net/baidu_38027860/article/details/79960927

网上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关系没有…如果你有其他的解决方案欢迎留言,大家一起交流互涨知识。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
当使用 jQuery 的 AJAX 发送 POST 请求时,如果请求的地址是跨域的,浏览器会拦截该请求,因为浏览器有同源策略,不允许跨域请求。 解决跨域问题的方法有很多种,其中一种常用的方法是通过前端代理来转发请求。具体步骤如下: 1. 在前端项目中设置一个代理服务器。 2. 在代理服务器上开启一个接口,用于接收前端发送的请求。 3. 在代理服务器上发送一个 AJAX 请求到目标地址,并将目标地址的响应返回给前端。 4. 在前端代码中将请求地址改为代理服务器的地址。 下面是使用 Express 框架实现一个简单的代理服务器的示例代码: ```javascript const express = require('express'); const request = require('request'); const app = express(); app.post('/api/proxy', (req, res) => { // 获取前端发送的 POST 请求数据 const postData = req.body; // 目标地址 const targetUrl = 'http://example.com/api'; request.post({ url: targetUrl, json: postData }, (err, response, body) => { if (err) { console.error(err); return res.status(500).send('Proxy error'); } // 将目标地址的响应返回给前端 res.send(body); }); }); app.listen(3000, () => { console.log('Proxy server is running on port 3000'); }); ``` 在前端代码中,将请求地址改为代理服务器的地址即可: ```javascript $.ajax({ url: 'http://localhost:3000/api/proxy', type: 'POST', data: { key1: 'value1', key2: 'value2' }, success: (data) => { console.log(data); }, error: (xhr, textStatus, errorThrown) => { console.error(xhr, textStatus, errorThrown); } }); ``` 注意:上述示例代码中使用了 Express 框架和 request 模块,请确保安装了这两个模块。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值