关于react上线系列问题及解决方案

近使用react做了一个音乐播放器小项目，在线下开发完成后，测试一切都没有问题，于是打算打包上线。首先注册了一个新浪云账号，然后创建了一个SAE应用实例，再然后就照着新浪云给出的远程仓库进行push。最终在这里整整花了一天的时间，经过老师的指导，最终成功上线，好了，接下来便说说我在push代码过程中遇到的问题吧！

首先：

前端环境：react react-router-dom redux react-redux  axios

后台环境：nodejs 

因为数据是通过反向代理得到的，所以搭建后台只是为了代理数据，并且这也是我在后面遇到的问题之一。

然后，git上传代码的时候遇到如下问题：

1、因为使用git不熟练，所以在拉取远程仓库的时候用户名写错了，然后后面就一直报错

报错代码：

fatal: Authentication failed for 'https://git.sinacloud.com/mymusic/'

解决方法：

方法一：

git config --global user.name "xxx"

git config --global user.email "xxx"

方法二：

git remote -v

git remote remove origin

git remote add origin xxx

上面的这两个方法如果解决不了问题，再尝试一下下面这个方法，一般情况下下面这个方法可以解决这类问题，具体如下所示：

git config --system --unset credential.helper

执行这个命令之后，你可以重新写入账号密码，这样就可以重新提交代码了。

解决方法来源于：https://cloud.tencent.com/developer/news/234398（感谢提供）

2、git在commit时找不到用户信息

报错代码：

** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'tim@newton.(none)')

解决办法：

直接在命令窗口运行

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

这两句代码，把后面的名字改成你自己的就可以了，当然也可以不用改。

3、最终push的时候报了一个错，然后我就弄了一天!

[remote rejected] master -> master (pre-receive hook declined)

我这里报错的的原因就是我在上面说的，因为后台没有搭建，因为我刚开始是通过反向代理代理的别人的数据，但是在传到新浪云应用去的时候需要与服务端一起传递才可以但是我并没有搭建服务端，然后我用express -e 快速搭建了一个以express为框架的服务端。最后成功的把文件传上了远程仓库，但是，后面又遇到了问题。

解决办法：搭建一个后台

4、由于前端代码中使用了反向代理，在线下开发中测试没有任何问题，但是线上却代理不到数据。

解决办法：

在服务器端进行反向代理。代码如下：

"connect-history-api-fallback": "^1.5.0",
"http-proxy-middleware": "^0.19.1",

　　这是服务器端package.json的代码，因为需要通过npm下载这两个中间件

connect-history-api-fallback:重定向
http-proxy-middleware：反向代理

两个中间件下载好后，就在app.js中进行配置，代码如下：

var history = require('connect-history-api-fallback');
var proxy = require('http-proxy-middleware');


var app = express();

app.use(history({
    index: '/'
}));
app.use('/music/api/*', proxy({target: 'https://api.mlwei.com/', changeOrigin: true}));

并将前端的反向代理改为如下：

axios.get('/music/api/？key=523077333&id=3641614987&type=11&cache=1&size=hq').then((res)=>{
     if(res.data.Code==='OK'){
     　　setSessionStorage('songList',JSON.stringify(res.data.Body));
         this.setState({
              list:res.data.Body,
              isLoading:true
          });
                
         }
            
     })    

然后就ok啦，项目就能在网上奔腾啦！！！
献上项目展示：
list/pic/lyric页：

 (项目路径：http://mymusic.applinzi.com)

链接：https://pan.baidu.com/s/1aMcwQYZqRbGqZtfj8d10Vg 
提取码：nkia

最后，感谢老师和同学们的帮助！！！！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有