摘要:坑請求跨域問題使用時,其中的已經默默幫你做了很多事,都幫你配置好了所以你發現你找不到相關的配置文件。放到服務器上仍然是空白的無法訪問。原來是因為路徑問題,簡單配置一下即可。上文提到過已經幫我們做好了很多事,方便在此,麻煩也在此。
react坑:
1、fetch請求cookie跨域問題
使用creat-react-app時,其中的react-script已經默默幫你做了很多事,都幫你配置好了:
React, JSX, ES6, and Flow syntax support. Language extras beyond ES6 like the object spread operator. Import CSS and image files directly from JavaScript. Autoprefixed CSS, so you don’t need -webkit or other prefixes. A build script to bundle JS, CSS, and images for production, with sourcemaps. A dev server that lints for common errors.
所以你發現你找不到webpack相關的配置文件。那么遇見跨域問題,例如cookie跨域時需要配置代理該怎么辦呢?
解決方法:
首先,配置代理。去package.json里添加一個proxy部分,如下:
"proxy": { "/*": { //星號代所有,也可以是 /xxx/* 或 /xxx/xxx/* "target": "http://10.0.209.147", //你獲取數據的服務器地址 "ws": true, "secure": true, "changeOrigin": true, "withCredentials": true, //跨域請求設置為true } }
接下來,在fetch方法中添加跨域請求憑證credentials: "include"
例如下面的登錄例子:
const url= "/xxxx/xxxxx/xxxx"; //請求地址,因為配置了代理,所以最開始處省略了主地址,直接以斜杠開始 let formData = new FormData(); formData.append("name", "admin"); //參數,用戶名 formData.append("password", "123456"); //參數,密碼 fetch(url, { method: "post", //post方法 body: formData, //傳參 credentials: "include", //此處最為重要,請求代理憑證 }).then(function (res) { return res.json(); }).then(function (json) { alert("cookie內容:"); //此處可以嘗試alert一下cookie里所有的內容 alert(json); //后臺返回的數據 });
2、react中creat-react-app的項目,完成后打包頁面訪問空白
npm run build 之后會自動生成一個build文件夾,打開其中的index.html發現頁面空白且報錯提示文件沒找到。放到服務器上仍然是空白的無法訪問。
原來是因為路徑問題,簡單配置一下即可。上文提到過react-script已經幫我們做好了很多事,方便在此,麻煩也在此。這個問題仍需更改其中的配置文件:
路徑:my-app ode_modules eact-scriptsconfig
修改path.js文件,紅框部分是修改后的結果,如下圖:
然后再重新npm run build 即可
react-native坑:1、react-native中的警告:
Warning: Can only update a mounted or mounting component. This usually means you called setState,replaceState, or forceUpdate on an unmounted component. This is a no-op.
Please check the code for the xxx component.
可能對一個沒有裝載的組件執行了setState()操作,在React的官網里有一個解決方案,isMounted
這種情況大多出現在callback中,異步請求返回數據之前,組件可能就已經被卸載了,等數據回來再使用setState就會警告,所以應該手動在componentWillUnmount里去取消callback
解決辦法:
componentWillUnmount() { this.setState = (state, callback) => { return; }; };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90661.html
摘要:本文主要介紹在移動端項目中如何使用及其配置使用腳手架生成的項目,后運行彈出配置項,該命令不可逆哦。使用了作為計算依據,因此需要在中貼上以下代碼,并沒有使用淘寶的方案使用的設計圖是的哦配置的按需加載當然了,你需要先。 本文主要介紹在react移動端項目中如何使用antd-mobile2及其配置 使用 create-react-app腳手架生成的項目,后運行npm run eject 彈出...
摘要:本文主要介紹在移動端項目中如何使用及其配置使用腳手架生成的項目,后運行彈出配置項,該命令不可逆哦。使用了作為計算依據,因此需要在中貼上以下代碼,并沒有使用淘寶的方案使用的設計圖是的哦配置的按需加載當然了,你需要先。 本文主要介紹在react移動端項目中如何使用antd-mobile2及其配置 使用 create-react-app腳手架生成的項目,后運行npm run eject 彈出...
閱讀 2249·2021-11-23 09:51
閱讀 1077·2021-11-22 15:35
閱讀 4854·2021-11-22 09:34
閱讀 1604·2021-10-08 10:13
閱讀 3023·2021-07-22 17:35
閱讀 2538·2019-08-30 15:56
閱讀 3086·2019-08-29 18:44
閱讀 3095·2019-08-29 15:32