react中fetch之cors跨域请求的实现方法


Posted in Javascript onMarch 14, 2018

项目中使用了react,当中需要使用fetch来代替ajax。

由于react的create_react_app工具很方便,基本上开箱即用,经过创建项目,输入npm start命令后,便自动监听一个3000的端口,到此前端部分就绪。

具体参考:https://github.com/facebookincubator/create-react-app

后端部分我使用了phalcon。

由于前后端分离,为了方便,我尝试在nginx中使之同域(前端和后台api的顶级域名相同),但phalcon框架是单入口、react监听3000时候,通过nginx反向代理,出现js找不到的问题,于是放弃同域的打算。

因此我配置了两个域名:

1、www.xxx.com
2、data.xxx.com

第一个域名用于react部分,端口号是3000(调试用,正式上线是80)
第二个域名用于api,端口号是80

于是乎出现跨域问题。

cors详细的介绍请看:https://3water.com/article/102694.htm

以下是php部分的允许跨域域名访问的设置

$origin    = isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'';
  $allowOrigin = [
            'http://www.xxx.com',
            'http://xxx.com'
          ];
  if (in_array($origin, $allowOrigin)) {
    header('Access-Control-Allow-Origin: ' . $origin);
  }

  header('Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS');
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Allow-Headers: Content-Type, Accept');

以下是fetch部分的ajax请求

let postData = {a:'b'};
fetch('http://data.xxx.com/Admin/Login/login', {
  method: 'POST',
  mode: 'cors',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: JSON.stringify(postData)
}).then(function(response) {
  console.log(response);
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 #Javascript
create-react-app构建项目慢的解决方法
Mar 14 #Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 #Javascript
react以create-react-app为基础创建项目
Mar 14 #Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 #Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 #Javascript
JavaScript实现区块链
Mar 14 #Javascript
You might like
PHP中实现图片的锐化
2006/10/09 PHP
PHP制作万年历
2015/01/07 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
Python中的字符串替换操作示例
2016/06/27 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python实现感知机(PLA)算法
2017/12/20 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
单位在职证明范本
2014/01/09 职场文书
单位办理社保介绍信
2014/01/10 职场文书
财务会计专业求职信
2014/06/09 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技