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 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
使用js实现数据格式化
Dec 03 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
Javascript函数式编程语言
Oct 11 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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和ACCESS写聊天室(一)
2006/10/09 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php实现的漂亮分页方法
2014/04/17 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
基于Vue实现拖拽功能
2020/07/29 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
公司年会主持词
2014/03/22 职场文书
企业元宵节主持词
2014/03/25 职场文书
2014年班组长工作总结
2014/11/20 职场文书
帝企鹅日记观后感
2015/06/10 职场文书