发布到 python 前夕时缺少 CORS header ‘Access-Control-Allow-Origin’

Question

我已经开始学习 python-eve。我已经创建了基本演示，如下所示：Python eve Quick start"

现在我制作了一个简单的网页，试图将一些数据 post 发送给 localhost.However 上的 /people 当我尝试提交数据时出现以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/people. (Reason: CORS request did not succeed)

这是我的 html 代码（表单部分）：

<form action="http://127.0.0.1:5000/people" method="post">
        <div class="form-group">
            <label for="name">First Name</label>
            <input type="text" name="firstname" class="form-control",required>
        </div>
        <div class="form-group">
            <label for="language">Last Name</label>
            <input type="text" name="lastname" class="form-control">
        <button type="submit" class="btn btn-primary btn-lg">Create new Person</button>
    </form>

这是处理提交的javascript代码

!(function(){
    const formSubmit = async function(e){
        const form = this;
        console.log(form)
        e.preventDefault();
        const formData = new FormData(form);
        const serializedData = JSON.stringify(formData);
        const options = {
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
            body:serializedData,
            data:serializedData
        };

        try{
            const url = 'http://localhost:5000/people';
            options.url = url;
            $.post(options, {
                success: (e) => {
                    console.log('success', e)
                },
                error: (e) => console.log('error', e)});
        }catch(e){
            console.log('Oh crap.Something happened');
            console.log(e);
        }
    };
    document.addEventListener('DOMContentLoaded',function(){
        const form = document.querySelector('form');
        form.addEventListener('submit',formSubmit);
    });
}());

有什么解决办法吗？我用 Webstorm 打开这个页面。

node 提供的解决方案不适用于我的情况我已将 X_DOMAINS='*' 添加到 settings.py 但仍然出现相同的错误

这里是settings.py:

MONGO_HOST = 'localhost'
MONGO_PORT = 27019
MONGO_DBNAME = 'apitest'
RATE_LIMIT_REQUEST = (2,60)
X_DOMAINS='*'
pschema = {
    'firstname': {
        'type': 'string',
        'minlength': 1,
        'maxlength': 10
    },
    'lastname': {
        'type': 'string',
        'minlength': 1,
        'maxlength': 10
    },
    'role': {
        'type': 'list',
        'allowed': ["author", "contributor", "copy"],
    },
    # An embedded 'strongly-typed' dictionary.
    'location': {
        'type': 'dict',
        'schema': {
            'address': {'type': 'string'},
            'city': {'type': 'string'}
        },
    },
    'born': {
        'type': 'datetime',
    },
}
aschema = {
    'name': {
        'type': 'string'
    },
    'language': {
        'type': 'string'
    }
}
people = {
    # 'title' tag used in item links. Defaults to the resource title minus
    # the final, plural 's' (works fine in most cases but not for 'people')
    'item_title': 'person',

    # by default the standard item entry point is defined as
    # '/people/<ObjectId>'. We leave it untouched, and we also enable an
    # additional read-only entry point. This way consumers can also perform
    # GET requests at '/people/<lastname>'.
    'additional_lookup': {
        'url': 'regex("[\w]+")',
        'field': 'lastname'
    },

    # We choose to override global cache-control directives for this resource.
    'cache_control': 'max-age=10,must-revalidate',
    'cache_expires': 10,

    # most global settings can be overridden at resource level
    'resource_methods': ['GET', 'POST'],

    'schema': pschema
}


assingments = {
    'item_title': 'assingment',
    # We choose to override global cache-control directives for this resource.
    'cache_control': 'max-age=10,must-revalidate',
    'cache_expires': 10,

    # most global settings can be overridden at resource level
    'resource_methods': ['GET', 'POST'],

    'schema': aschema
}

DOMAIN = {
    'people': people,
    'assingments': assingments
}

Answer 1

需要设置headers。这就是它在 python 龙卷风中的表现。你可能会在晚上查看如何执行此操作。

def set_default_headers(self):
    self.set_header("Access-Control-Allow-Origin", "*")
    self.set_header("Access-Control-Allow-Headers", "x-requested-with")
    self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')

Answer 2

我遇到了完全相同的问题。您的表格显示：

<form action="http://127.0.0.1:5000/people" method="post">

您的回电说：

try{
            const url = 'http://localhost:5000/people';
            options.url = url;

127.0.0.1 和 localhost 与 JQuery 不同，它拒绝响应作为跨站点脚本错误。

Answer 3

嘿，我终于找到了 problem.I 的解决方案，只需像这样使用 @app.after_request：

@app.after_request
def after_request(response):
  response.headers.set('Access-Control-Allow-Origin', '*')
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.set('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  return response

这将解决任何 cors 错误

发布到 python 前夕时缺少 CORS header ‘Access-Control-Allow-Origin’

CORS header ‘Access-Control-Allow-Origin’ missing when posting to python eve

javascript

python

cors

eve