问题描述
我使用 create-react-app 制作了一个前端 SPA。我实现了 http-proxy-middleware 来解决通过 api 调用 https://api.deezer.com 的 CORS 问题。代理在本地完美运行,但在部署到 Heroku 后无法添加标头,并且 api 调用中的 res.data 在控制台中未定义。
这是我的 /src 文件夹中的 setupProxy.js。
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
proxy("/chart",{
target: "https://api.deezer.com",changeOrigin: true
})
)
app.use(
proxy("/artist",changeOrigin: true
})
)
app.use(
proxy("/search",changeOrigin: true
})
)
app.use(
proxy("/album",changeOrigin: true
})
)
}
getTopHits() {
return(
axios.get('/chart')
)
}
这是我的 package.json:
{
"homepage": "https://secret-hamlet-05097.herokuapp.com/","name": "client","version": "0.1.0","private": true,"dependencies": {
"@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","axios": "^0.21.1","fetch-jsonp": "^1.1.3","react": "^16.13.1","react-dom": "^16.13.1","react-router-dom": "^5.2.0","react-scripts": "3.4.3"
},"scripts": {
"predeploy": "npm run build","deploy": "gh-pages -d build","dev": "react-scripts start","start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject","heroku-postbuild": "npm run build"
},"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": {
"gh-pages": "^3.1.0","http-proxy-middleware": "^0.19.1"
}
}
可能有什么问题?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)