所请求的资源上没有"Access-Control-Allow-Origin"标头.-React/Node API [英] No 'Access-Control-Allow-Origin' header is present on the requested resource. - React/Node API
问题描述
我正在尝试使用Twitter进行护照认证.我的设置如下:React(带有redux)前端(create-react-app),Node(带有express)API.两者都在localhost(不同的端口)上运行.
用户转到/login
,然后单击调度登录操作的按钮:
I'm trying to get passport authentication with twitter to work. My setup is as follows: React(with redux) frontend (create-react-app), Node (with express) API. Both are running on localhost (different ports).
User goes to /login
and clicks on a button that dispatches a login action:
export function login() {
return dispatch => {
return axios.get('/api/auth/twitter')
.then(() => {})
}
}
服务器上的路由:
router.get('/twitter', passport.authenticate('twitter'));
以及回调的路径:
router.get('/twitter/callback', passport.authenticate('twitter', {failureRedirect: '/login'}), loginSuccess);
loginSuccess
目前不执行任何操作.
loginSuccess
does nothing at the moment.
这是我得到的全部错误: XMLHttpRequest无法加载https://api.twitter.com/oauth/authenticate?oauth_token=fGVctgAAAAAA1y22AAABXah3t3o.所请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许访问来源"http://127.0.0.1:3000".
This is the full error I get:
XMLHttpRequest cannot load https://api.twitter.com/oauth/authenticate?oauth_token=fGVctgAAAAAA1y22AAABXah3t3o. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.
我正在将来自反应前端(localhost:3000)的请求代理到localhost:8080.
I'm proxying requests from the react frontend (localhost:3000) to localhost:8080.
如果我进入chrome devtools的网络标签,然后从twitter api中选择响应,则它看起来像这样:
If I go into the network tab of the chrome devtools and select the response from the twitter api it looks like this:
如果有人知道如何通过护照验证者身份验证来进行这种设置,请告诉我.
If anyone knows how to get passport-twitter authentication to work with this kind of setup please let me know.
推荐答案
不幸的是,Twitter不允许您调用其API客户端,您需要使用服务器才能做到这一点:(
Sad news, Twitter won't let you to call its API client-side, you need a server in order to do that :(
看看这个 Quora答案.
这篇关于所请求的资源上没有"Access-Control-Allow-Origin"标头.-React/Node API的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!