为什么我在设置 Access-Control-Allow-Origin 后会收到 CORS 错误？

Question

问题

响应标头的 Access-Control-Allow-Origin 与请求 Origin 标头匹配，但我仍然收到错误消息 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://myappname.herokuapp.com/api/v1/products. (Reason: CORS request did not succeed).[Learn More]

标题

响应头

HTTP/1.1 308 PERMANENT REDIRECT
Connection: keep-alive
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization, content-type
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Access-Control-Allow-Origin: http://localhost
Content-Length: 311
Content-Type: text/html; charset=utf-8
Date: Thu, 04 Apr 2019 10:03:39 GMT
Location: http://mpappname.herokuapp.com/api/v1/products/
Server: waitress
Via: 1.1 vegur

请求标头

Host: mpappname.herokuapp.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,content-type
Referer: http://localhost/admin/main/products/create
Origin: http://localhost
DNT: 1
Connection: keep-alive

背景

生成标题的代码如下，但我更关心理解为什么 CORS 预检会拒绝它。这是针对具有产品 CRUD 设计和基于令牌的身份验证的烧瓶 API。

剪辑版

from flask_cors import CORS

def create_app(config_name):
    ...
    CORS(app, origins="http://localhost",
      allow_headers=["Content-Type", "Authorization", "Access-Control-Allow-Credentials"],
      supports_credentials=True)
    ...
    return app

完整版

from flask import Flask
from config import config
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS
db = SQLAlchemy()

def create_app(config_name):
    app = Flask(__name__)
    app.config.from_object(config[config_name])
    config[config_name].init_app(app)

    db.init_app(app)
    CORS(app, origins="http://localhost",
      allow_headers=["Content-Type", "Authorization", "Access-Control-Allow-Credentials"],
      supports_credentials=True)

    from .main import main as main_blueprint
    app.register_blueprint(main_blueprint)

    from .api import api as api_blueprint
    app.register_blueprint(api_blueprint, url_prefix='/api/v1')

    return app

Answer 1

我在请求

http://mpappname.herokuapp.com/api/v1/products

而不是

http://mpappname.herokuapp.com/api/v1/products/

对某些人来说可能很明显，但我需要明确阅读这篇博文才能理解这一点：

https://airbrake.io/blog/http-errors/308-permanent-redirect

308 永久重定向的出现通常不需要太多用户干预。所有现代浏览器都会自动检测 308 永久重定向响应代码并自动处理重定向到新 URI 的操作。发送 308 代码的服务器还将包含一个特殊的 Location 标头，作为它发送给客户端的响应的一部分。此 Location 标头指示可以在其中找到请求的资源的新 URI。例如，如果客户端发送 HTTP POST 方法请求以尝试登录 https://airbrake.io URL，则 Web 服务器可以配置为将此 POST 请求重定向到不同的 URI，例如 https://airbrake.io/login。在这种情况下，服务器可能会使用 308 永久重定向代码进行响应，并在响应中包含 Location:https://airbrake.io/login 标头。这会通知用户代理（浏览器）服务器已收到 POST 请求数据（登录信息），但资源已永久移动到 https://airbrake.io/login 的 Location 标头 URI。