項目中使用了react,當中需要使用fetch來代替ajax。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、做網(wǎng)站與策劃設(shè)計,特克斯網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:特克斯等地區(qū)。特克斯做網(wǎng)站價格咨詢:18982081108
由于react的create_react_app工具很方便,基本上開箱即用,經(jīng)過創(chuàng)建項目,輸入npm start命令后,便自動監(jiān)聽一個3000的端口,到此前端部分就緒。
具體參考:https://github.com/facebookincubator/create-react-app
后端部分我使用了phalcon。
由于前后端分離,為了方便,我嘗試在nginx中使之同域(前端和后臺api的頂級域名相同),但phalcon框架是單入口、react監(jiān)聽3000時候,通過nginx反向代理,出現(xiàn)js找不到的問題,于是放棄同域的打算。
因此我配置了兩個域名:
1、www.xxx.com
2、data.xxx.com
第一個域名用于react部分,端口號是3000(調(diào)試用,正式上線是80)
第二個域名用于api,端口號是80
于是乎出現(xiàn)跨域問題。
cors詳細的介紹請看:https://www.jb51.net/article/102694.htm
以下是php部分的允許跨域域名訪問的設(shè)置
$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); });
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站題目:react中fetch之cors跨域請求的實現(xiàn)方法
文章URL:http://muchs.cn/article40/ghioeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、外貿(mào)建站、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)