发布到python eve时缺少CORS标头“ Access-Control-Allow-Origin”

Question

I have started learning python-eve.I have created the basic demo as shown here : Python eve Quick start"

Now I have made a simple web page that will try to post some data to /people on localhost.However when I try to submit the data I get the following error:

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

Here is my html code(the form part):

<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>

And here is the javascript code that handles the submit

!(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);
    });
}());

Any ideas how can I solve it?I open this page using Webstorm.

The sollutions provided by node won't work for my case I have added X_DOMAINS='*' to settings.py but still getting the same error

Here is 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

The headers need to be set. This is how its done in python tornado. You could maybe look up how to do this in eve.

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

I had the exact same problem. Your form says:

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

Your callback says:

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

127.0.0.1 and localhost are not the same thing to JQuery and it rejects the response as a cross-site scripting error.

Answer 3

Hey I finally found a solution to my problem.I just need to use @app.after_request like this:

@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 

This will take care of any cors errors