Angular cors 问题:对预检请求的响应未通过访问控制检查:它没有 HTTP ok 状态
Angular cors issue :Response to preflight request doesn't pass access control check: It does not have HTTP ok status
我有一个 angular 8 应用程序,它向托管在 IIS 服务器上的 Flask REST API 发出 POST 请求(使用 windows 身份验证)。问题是每次我从 angular 代码发出 POST 请求时,我都会收到 CORS 错误:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
当我直接从浏览器直接调用它们时,api 工作正常问题是当我从我的 angular 项目调用它们时。
我用过flask-CORS库:
cors = CORS(app, resources={r"/*": {"origins": "*"}})
@app.route('/', methods=['GET', 'POST'])
@cross_origin(origin='*', headers=['Content-Type', 'Authorization'], supports_credentials=True)
def home():
"""
Returns template for Home page .
"""
return "<h1>Home Page</h1>"
我在我的 IIS 服务器中设置了这些 HTTP 响应 headers:
Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
当我检查网络选项卡时,我收到 CORS 错误而不是状态 401,因此我认为该错误不是身份验证问题。
我遇到过多个 Whosebug 问题,但所有问题都涉及 ASP.net,少数涉及 flask 的问题他们都提到在 IIS 服务器中设置 Headers,但我的问题仍未解决。
请指导我...
编辑
这是我的回复headers:
Provisional headers are shown
Accept: application/json, text/plain, */*
content-type: application/json
当您发出 POST 请求时,浏览器会自动发出预检 OPTIONS 请求。 OPTIONS 请求的目的是验证您是否有权发出 POST 请求。
您的问题有 2 个解决方案:
(1) 在您的服务器上设置 COR headers 以允许来自其他域的请求
(2) 将您的服务器设置为代理请求 - 这会绕过浏览器,因为只有浏览器强制执行 CORS,您的服务器上不再需要 CORS headers。
方法 (1) 您可以在浏览器的网络选项卡上测试 COR headers 是否按预期通过。可能你还需要支持OPTIONS预检方式
方法 (2) 更安全但工作量更大,因为您还需要在您的产品服务器上进行设置(如果您有的话)。
此处有一篇关于 Angular 代理的文章...https://medium.com/bb-tutorials-and-thoughts/angular-how-to-proxy-to-backend-server-6fb37ef0d025...但我相信还有更好的文章,请搜索一下!
祝一切顺利:)
所以我终于解决了!
这个 link 中的答案是有效的,它说我们需要使用 OPTIONS 请求的新规则更新网络配置文件。
要使用上面的 sol,您必须在 IIS 服务器上下载 url rewrite for Web platform installer(这也必须下载)。
请记住,只应启用 windows 身份验证(同时单击 windows 身份验证选项,然后从那里单击高级设置,将 NTLM 推到列表顶部)。
我有一个 angular 8 应用程序,它向托管在 IIS 服务器上的 Flask REST API 发出 POST 请求(使用 windows 身份验证)。问题是每次我从 angular 代码发出 POST 请求时,我都会收到 CORS 错误:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
当我直接从浏览器直接调用它们时,api 工作正常问题是当我从我的 angular 项目调用它们时。
我用过flask-CORS库:
cors = CORS(app, resources={r"/*": {"origins": "*"}})
@app.route('/', methods=['GET', 'POST'])
@cross_origin(origin='*', headers=['Content-Type', 'Authorization'], supports_credentials=True)
def home():
"""
Returns template for Home page .
"""
return "<h1>Home Page</h1>"
我在我的 IIS 服务器中设置了这些 HTTP 响应 headers:
Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
当我检查网络选项卡时,我收到 CORS 错误而不是状态 401,因此我认为该错误不是身份验证问题。
我遇到过多个 Whosebug 问题,但所有问题都涉及 ASP.net,少数涉及 flask 的问题他们都提到在 IIS 服务器中设置 Headers,但我的问题仍未解决。
请指导我...
编辑
这是我的回复headers:
Provisional headers are shown
Accept: application/json, text/plain, */*
content-type: application/json
当您发出 POST 请求时,浏览器会自动发出预检 OPTIONS 请求。 OPTIONS 请求的目的是验证您是否有权发出 POST 请求。
您的问题有 2 个解决方案:
(1) 在您的服务器上设置 COR headers 以允许来自其他域的请求 (2) 将您的服务器设置为代理请求 - 这会绕过浏览器,因为只有浏览器强制执行 CORS,您的服务器上不再需要 CORS headers。
方法 (1) 您可以在浏览器的网络选项卡上测试 COR headers 是否按预期通过。可能你还需要支持OPTIONS预检方式
方法 (2) 更安全但工作量更大,因为您还需要在您的产品服务器上进行设置(如果您有的话)。
此处有一篇关于 Angular 代理的文章...https://medium.com/bb-tutorials-and-thoughts/angular-how-to-proxy-to-backend-server-6fb37ef0d025...但我相信还有更好的文章,请搜索一下!
祝一切顺利:)
所以我终于解决了!
这个 link 中的答案是有效的,它说我们需要使用 OPTIONS 请求的新规则更新网络配置文件。
要使用上面的 sol,您必须在 IIS 服务器上下载 url rewrite for Web platform installer(这也必须下载)。
请记住,只应启用 windows 身份验证(同时单击 windows 身份验证选项,然后从那里单击高级设置,将 NTLM 推到列表顶部)。