我有一个React/Node/Express web应用程序,并在两个独立的服务器上运行。React运行在localhost:8080上,并将API请求代理到运行在localhost:3000上的节点服务器。这将是我的生产设置,所以如果可能的话,我想保持这个结构完整。
我遇到的问题是我的API的一部分需要将用户重定向到一个页面,以便从Spotify API中获取一个令牌,然后在成功的身份验证后重定向回我的正确页面。
API调用代理的执行方式如下:
const axios = require('axios');
const axiosInstance = axios.create({
baseURL: process.env.NODE === 'production' ? '' : 'http://localhost:3000'
});
module.exports = axiosInstance;到目前为止,这是很好的工作,因为我可以保持我的React和Node服务器完全分开。
如前所述,我需要通过后端的API调用将我的反应前端重定向到另一个页面(Spotify身份验证)来验证用户,然后Spotify在用户允许或不允许访问Spotify帐户后重定向回我的站点。
在我的前端- localhost:8080上,用户点击一个按钮来调用这个函数.
authenticate = () => {
axios.get('/login')
.then(data => console.log(data));
}它在localhost:3000上调用这个端点。
router.get('/', (req, res) => {
let scopes = 'user-read-private user-read-email';
let client = process.env.SPOTIFY_CLIENT;
let redirect = 'http://localhost:3000/login/redirect';
res.redirect(`https://accounts.spotify.com/authorize?response_type=code'
&client_id=${client}${scopes ? `&scope=${encodeURIComponent(scopes)}` : ''}
&redirect_uri=${encodeURIComponent(redirect)}&state=${state}`);
});当我点击前端的登录按钮时,我会得到这个响应,我相信它来自Spotify,因为我可以成功地向API中的其他端点发出跨源请求。
Failed to load... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
但是,当我手动导航到localhost:3000/login时,重定向工作将被发送到Spotify身份验证页面。
此外,我还测试了如何将前端重定向到任何url,但它不起作用。
因此,我的问题是,我如何通过不提供静态前端内容的服务器通过API调用重定向我的前端呢?
发布于 2018-03-28 23:57:17
这是因为您的axios.get('/login')是对服务器的AJAX请求,然后您的服务器告诉AJAX请求被重定向到Spotify,但是Spotify没有注册您的前端服务器,因此您得到了CORS错误,因为您的请求是在前端服务器URL上启动的。
您的AJAX请求遵循了给定的重定向。,不尝试在http://localhost:3000上加载浏览器,然后将其重定向到Spotify授权页面。
现在,与其做:
authenticate = () => {
axios.get('/login')
.then(data => console.log(data));
}你可以这样做:
authenticate = () => {
window.location.href = "http://localhost:3000"
}这将指示您的前端应用程序访问您的API服务器的URL,然后遵循重定向立即到Spotify,然后您可以授权并被重定向回您的API服务器,后者可以重定向回您的前端应用程序。
老实说,这有点过火了,因为考虑到您使用的相对URL,您的反应应用程序和节点应用程序看起来就像是在开发之外的同一个域上运行。如果您正在使用create-react-app,您应该按照他们的说明,通过这或手动通过这配置您的代理。
您需要修改代理是如何配置的,或者从在那里执行AJAX请求更改为实际直接转到/login (而不是执行AJAX请求)。
https://stackoverflow.com/questions/49483452
复制相似问题