React跨域问题解决
https://segmentfault.com/q/1010000012732581
非跨域问题报错 -rpccorsdomain="http://localhost:3000"
react中 ajax跨域请求
因为项目需要,目前需要通过react ajax请求,实现请求其它域的登录URL,将用户写入到其它域的cookie中,之后herf连接该网址的其他内容的时候,便可直接跳转到对应内容,无需跳转到登录页面。
1、cors和jsonp
何为跨域,及当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。在做跨域请求的时候,cors和jsonp我都尝试过了。
1.1cors
cors(Cross-Origin Resource Sharing 跨源资源共享)。简单请求时,浏览器会直接发送跨域请求,并在请求头中携带Origin 的header,表明这是一个跨域的请求。服务器端接到请求后,会根据自己的跨域规则,通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头,来返回验证结果。如果验证成功,则会直接返回访问的资源内容。
1.2jsonp
jsonp(Json with Padding 填充式JSON或参数式JSON),JSONP的基本思想是,网页通过添加一个元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
举一个案例来说明。
假设客户期望返回JSON数据:["customername1","customername2"]。
如客户想访问 : http://localhost:3000?jsonp=callbackfunction。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。
最后还是采用的cors实现了,jsonp虽然请求成功了,但是针对callback函数,我这边还没有解决。
2、cors在后端的配置
2.1 nodejs的配置
//该代码所放置的位置需要靠前,如果后端有redirect跳转链接,则需要将此代码放置在redirect前
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "" );//若需要加入withCredentials,则需要将改为具体域名
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
2.2 php的配置
<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要为跨域CORS配置的两大基本信息,Origin和headers
3、react 前端请求
前端若采用ajax请求,get或者post数据,按照正常的方式即可。
$.ajax({
//需要跨域的url
url:"****",
method: "POST",
crossDomain:true,
xhrFields:{withCredentials:true},
beforeSend:function(xhr){
xhr.withCredentials=true;
},
success: function (data) {
console.log(data);
}.bind(this),
error: function (xhr, status, err) {
console.log(err);
}.bind(this)
});
4、结束语
利用cors跨域,既可以实现post也可以实现get,若利用jsonp实现跨域,仅可实现get方式的跨域访问。而且cors方式,仅需要在后端配置,前端照常访问即可,方式还是比较简单的。
React跨域问题解决的更多相关文章
- django 前端请求跨域问题解决
django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...
- Vue项目在开发环境跨域和生成环境部署跨域问题解决
一.在dev环境下的跨域问题解决1.项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host) axios.defaul ...
- React跨域
React跨域 一.使用http-proxy-middleware中间件解决跨域问题 1.安装包: npm install http-proxy-middleware --save-dev 2.配置: ...
- FastAdmin 关于跨域问题解决
FastAdmin 关于跨域问题解决 之前很久之前收集到社区的问题. https://forum.fastadmin.net/thread/277 今天又有人问到,无法打开,估计是网络问题. 以下为完 ...
- vue跨域问题解决(生产环境)
vue跨域问题解决(使用webpack打包的) 配置代理:(config下index.js文件) module.exports = { dev: { env: require('./dev.env') ...
- ajax请求ashx跨域问题解决办法
ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng ...
- Nginx 学习笔记(八)http和https跨域问题解决
今天在做网易云信的时候,修改了一下源码,使用自己的服务端进行登陆, 注意:这里是使用http域名访问https域名 1.下载源码,配置了IM的域名,im.tinywan.com 没有开启https,具 ...
- vue中axios访问Java后端跨域问题解决
问题背景: 前后端分离,前端选用Vue,后端选用Java,vue编译出的静态页面采用ngix发布,在前端访问后端时出现跨域问题. 解决方法: 跨域的问题解决方法有好多种,这里是通过服务端解决,以下是代 ...
- uni-app h5端跨域问题解决
例如我现在的项目运行在 http://localhost:8080,而我有个接口是 https://service.picasso.adesk.com/v1/wallpaper/album,发起请求就 ...
随机推荐
- python web应用--WSGI接口(二)
WSGI接口定义非常简单,它只要求Web开发者实现一个函数,就可以响应HTTP请求.我们来看一个最简单的Web版本的“Hello, web!”: 1 # server.py 2 # 从wsgiref模 ...
- 问题 B: 矩形类中运算符重载【C++】
题目描述 定义一个矩形类,数据成员包括左下角和右上角坐标,定义的成员函数包括必要的构造函数.输入坐标的函数,实现矩形加法,以及计算并输出矩形面积的函数.要求使用提示中给出的测试函数并不得改动. 两个矩 ...
- P1540 机器翻译
题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...
- P2447 [SDOI2010]外星千足虫
怎么说呢? 因为是在mod 2 意义下的吗(一般是遇到二就可能是位运行算或二分图) 就可以利用异或计算. 因为奇数和偶数在二进制上就用判断最后一位就可以了 然后因为异或符合交换律和结合律 直接消元就可 ...
- burpsuite 出现 ssl_error_no_cypher_overlap
解决方案一:1.浏览器地址栏输入 about:config2.查找 security.tls.version.fallback-limit 和 security.tls.version.min,并将值 ...
- (转载)git常用命令
创建和使用git ssh key 首先设置git的user name和email: git config --global user.name "xxx" git config - ...
- jQuery实现轮播切换以及将其封装成插件(1)
我们在网上经常会看到一些轮播切换的效果.轮播切换,就是在一个有限的空间中定时的像走马灯一样去播放一组图片,当然也可以通过鼠标悬停在小按钮上来切换显示.下面我们将一步一步的实现这一效果. 为保证效果,请 ...
- 第32章 TIM—高级定时器—零死角玩转STM32-F429系列
第32章 TIM—高级定时器 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...
- python main
python中的main函数,总体来说就是,main比较适合写test测试,有点类似于java中的testcase,就是程序单独运行时是运行main的,但是当被调用时就不会运行main了.具体可以参考 ...
- window7配置python3.3 + django + apache24 + mod_wsgi
window7安装配置python3.3 + django + apache24 + mod_wsgi 1.下载版本的时候要对应 2.apache24 别放系统盘, 不然权限很麻烦 3.django ...