因此基本上,我的应用程序中有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"
}
}