将React App部署到Heoku后,出现REST API问题

因此基本上,我的应用程序中有React js和Node js。一切正常,但是我在Web应用程序的一部分中向节点后端发出了后期请求,以获取与通过ebay api获取一系列商品有关的数据。在开发过程中,此方法工作正常,但是当我尝试在部署后执行相同的操作时,出现404错误

Response {type: "basic",url: "https://udabasili.herokuapp.com/api/ebay",redirected: false,status: 404,ok: false, …}

客户端链接为https://udabasili.herokuapp.com/ 服务器链接为https://ud-portfolio-app.herokuapp.com/

我什至使用邮递员向在heroku上部署的节点域发送一个邮寄请求,并且该请求有效,因此问题似乎出在react js应用

应用程序很大,但基本上我有节点,并且在两个不同的域上进行了响应,并具有链接节点服务器的static.json。我已经部署了使用代理对js进行响应

应用程序的重要部分:

STATIC.JSON

{
"root":"build/","routes":{
    "/**":"index.html"
},"proxies":{
    "/api/":{
        "origin":"https://ud-portfolio-app.herokuapp.com/"
    }
} 

}

NODE.JS

 const express = require("express");
const app = express()
const path = require("path")
const Ebay = require('ebay-node-api');
const cors = require("cors")
const bodyParser = require("body-parser");

const PORT = process.env.PORT || 8081;

let access_token = '';
let ebay = new Ebay({
    clientID: '******************',clientSecret: '*******************',body: {
        grant_type: 'client_credentials',scope: 'https://api.ebay.com/oauth/api_scope'

    }
});


app.use(cors());
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

// An api endpoint that returns a short list of items
app.post('/api/ebay',(req,res) => {
    const item = req.body.itemName;
    ebay.findItemsByKeywords({
            keywords: `${item} movie`,}).then((data) => {
                res.json(data[0].searchResult[0].item);
            },(error) => {
                console.log(error);
            });
});


app.listen(PORT);

REST API部分

在本节中,我将获取两个api。 youtube的一项工作,但ebay出现404错误

    function fetchProducts(name) {
    const itemName = name;
    const ebayApi = fetch("/api/ebay",{
                      method: "POST",cache: "no-cache",headers:{
                        "Content-Type": "application/json"
                          },body:JSON.stringify({itemName:itemName})
                    }
                  );
   const youtubeApi = fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${name}%20movie%20trailer&key=**************`);
  return (dispatch) => {
    Promise.all([ebayApi,youtubeApi])
      .then( values =>  Promise.all(values.map(value =>{
        console.log(value);
        return value.json()})

        ))

      .then(res => {

        const youtube = `https://www.youtube.com/embed/${res[1].items[0].id.videoId}?autoplay=1&showinfo=0&rel=0`;
        return (res[0],res[1].items[0].id.videoId)
      })
      .catch((error) => {
        console.log(error);
      });
  };
}

export default fetchProducts;

CLIENT PACKAGE.JSON

    {
  "name": "client","version": "0.1.0","proxy": "http://localhost:8081","private": true,"dependencies": {
    "babel-eslint": "^10.0.3","d3": "^5.12.0","ebay-node-api": "^2.7.2","flag-icon-css": "^3.4.5","font-awesome": "^4.7.0","node-sass": "^4.13.0","prop-types": "^15.7.2","react": "^16.11.0","react-dom": "^16.11.0","react-redux": "^7.1.1","react-router-dom": "^5.1.2","react-scripts": "3.2.0","react-transition-group": "^4.3.0","redux": "^4.0.4","redux-persist": "^6.0.0","redux-thunk": "^2.3.0","topojson-client": "^3.0.1","youtube-api-search": "^0.0.5"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","lint": "eslint --ext .js --ext .jsx ."
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  },"devDependencies": {
    "eslint": "^6.6.0","eslint-config-airbnb": "^18.0.1","eslint-plugin-import": "^2.18.2","eslint-plugin-jsx-a11y": "^6.2.3","eslint-plugin-react": "^7.16.0","eslint-plugin-react-hooks": "^1.7.0"
  }
}
PUXI3230 回答:将React App部署到Heoku后,出现REST API问题

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3163370.html

大家都在问