Python Flask CORS-重定向()上不存在访问控制允许原点标头

Python Flask CORS-重定向()上不存在访问控制允许原点标头,python,angularjs,flask,flask-restful,Python,Angularjs,Flask,Flask Restful,我正在实现OAuth Twitter用户登录(FlaskAPI和Angular) 当我单击“使用twitter登录”按钮并打开一个弹出窗口时,我不断收到以下错误: XMLHttpRequest cannot load https://api.twitter.com/oauth/authenticate?oauth_token=r-euFwAAAAAAgJsmAAABTp8VCiE. No 'Access-Control-Allow-Origin' header is present on the

我正在实现OAuth Twitter用户登录(FlaskAPI和Angular)

当我单击“使用twitter登录”按钮并打开一个弹出窗口时,我不断收到以下错误:

XMLHttpRequest cannot load https://api.twitter.com/oauth/authenticate?oauth_token=r-euFwAAAAAAgJsmAAABTp8VCiE. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
我正在使用python Cors包来处理Cors,我已经让instagram登录正常工作了。 我相信这与反应是重定向有关,但未能纠正问题

我的烧瓶代码如下所示:

app = Flask(__name__, static_url_path='', static_folder=client_path)
cors = CORS(app, allow_headers='Content-Type', CORS_SEND_WILDCARD=True)
app.config.from_object('config')

@app.route('/auth/twitter', methods=['POST','OPTIONS'])
@cross_origin(origins='*', send_wildcard=True)
#@crossdomain(origin='')
def twitter():
    request_token_url = 'https://api.twitter.com/oauth/request_token'
    access_token_url = 'https://api.twitter.com/oauth/access_token'
    authenticate_url = 'https://api.twitter.com/oauth/authenticate'

    # print request.headers

    if request.args.get('oauth_token') and request.args.get('oauth_verifier'):
        -- omitted for brevity --
    else:
        oauth = OAuth1(app.config['TWITTER_CONSUMER_KEY'],
                       client_secret=app.config['TWITTER_CONSUMER_SECRET'],
                       callback_uri=app.config['TWITTER_CALLBACK_URL'])
        r = requests.post(request_token_url, auth=oauth)
        oauth_token = dict(parse_qsl(r.text))
        qs = urlencode(dict(oauth_token=oauth_token['oauth_token']))
        return redirect(authenticate_url + '?' + qs)

问题不在你。您的客户端应用程序正在向Twitter发送请求,所以需要支持CORS的不是您,而是Twitter。但是Twitter API目前不支持CORS,这实际上意味着你不能直接从浏览器与它对话

避免此问题的一种常见做法是让客户端应用程序将身份验证请求发送到您自己的服务器(例如您拥有的同一个Flask应用程序),然后服务器连接到Twitter API。由于服务器端不受CORS要求的约束,因此没有问题


如果您需要一些想法,我已经写了一篇关于为Facebook和Twitter进行这种类型的身份验证流的博客文章:

我为您发布的文章提供了您的回购。但是在客户端收到相同的错误<代码>XMLHttpRequest无法加载https://api.twitter.com/oauth/authorize?oauth_token=FozjZwAAAAAAgJsmAAABTqljgg0. 请求的资源上不存在“访问控制允许来源”标头。因此,不允许访问源“null”。目前,客户端启动,但向另一个域(Flask api)authorize/twitter的服务器发送post请求,然后服务器返回twitter重定向,这就是我在客户端应用程序上看到的错误消息。您向我显示的错误表明浏览器正在直接向Twitter API发送请求,因此它与您所说的不一致。请注意,URL。。。在错误消息中。我的教程中的实现从不直接向提供者发送Ajax请求,所有请求都通过Flask应用程序(我方便地将其作为客户端应用程序提供在同一个域中)。如果我的Angular客户端应用程序和Flask api位于不同的域中,有什么方法可以让它工作吗?--(我确实使用了你的示例应用程序btw,谢谢)@DanielGaeta如果你通过你的API依赖所有的身份验证请求,那么只需在你的Flask API项目中添加CORS支持,这将使你的Angular应用程序能够与Flask API对话,无论它位于何处。然后,Flask API可以代表Angular应用程序自由联系Twitter API。