[Python] [Javascript]无法弄清楚如何从NEXTjs网页GUI向Python Falcon后端发送API调用 - javascript

我正在尝试使用简单的表单字段将来自NEXTjs前端的POST请求发送到位于同一服务器上的后端，该服务器是使用Falcon库的python脚本。 python脚本本身由Gunicorn运行，并在8080端口上侦听。

两种代码都运行得很好，没有错误，但是当我尝试提交表单时，我得到的是一个415错误，这似乎表明我尝试发送到API的内容不是受支持的媒体类型，而是如本文所指出的answer

  Falcon对Content-Type请求的开箱即用支持：application / json

由于网页和服务器托管在同一个VPS上，因此我也尝试在fetch调用中使用127.0.0.1地址，但这也没有成功（事实上，后端API甚至没有响应）

这是后端代码：

#!/usr/bin/env python
# coding=utf-8


import time
import falcon
import json


class Resource(object):

    def on_post(self, req, resp, **kwargs):
        request_body = req.media

        print('POST Request: {}'.format(req))
        print('Request body: {}'.format(request_body))

        start = time.time()

        resp.body = json.dumps({
            'count_identical_pairs': count_identical_pairs(request_body),
            'computation_time': int((time.time() - start) * 1000)
        })


def count_identical_pairs(integers_array):
    total = 0
    count = dict()

    # Type checking
    if not isinstance(integers_array, list):
        return -1

    # Check if N is within the range [0..100,000]
    if len(integers_array) > 100000:
        return -2

    for integer in integers_array:

        # Check if each element of the array is within the range [−1,000,000,000..1,000,000,000]
        if integer not in range(-1000000000, 1000000000):
            return -3

        if str(integer) not in count:
            count[str(integer)] = 1
        else:
            count[str(integer)] += 1

    for key, value in count.items():
        total += value * (value - 1) / 2

    return total


api = application = falcon.API()

api.add_route('/count_identical_pairs', Resource())

这是前端：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Index extends React.Component {
    constructor() {
        super();
        this.state = {
            input_array: [],
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.myHeaders = new Headers();
    }

    onChange = evt => {
        // This triggers everytime the input is changed
        this.setState({
            [evt.target.name]: evt.target.value,
        });
    };

    onSubmit = evt => {
        evt.preventDefault();
        console.log('this.state.input_array = ' + this.state.input_array);
        console.log('JSON.stringify(this.state.input_array) = ' + JSON.stringify(this.state.input_array));
        // Making a post request with the fetch API
        // Test payload [1, 7, 7, 5, 7, 5, 6, 1]
        fetch('http://vps638342.ovh.net:8080/count_identical_pairs', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json; charset=utf-8'
            },
            mode: 'no-cors',    // Security hazard?
            body: JSON.stringify(this.state.input_array),
            redirect: 'follow'
        })
        .then(response => response.text())
        .then(data => console.log('Data: ' + data))
        .catch(error => console.log('Error: ' + error))
    };

    render() {
        return (
            <form onSubmit={this.onSubmit} >
                <input
                    name="input_array"
                    type="text"
                    id="name"
                    value={this.state.input_array}
                    onChange={this.onChange}>
                </input>
                <input type="submit" />
            </form>
        );
    };
}

ReactDOM.render(<Index />, document.getElementById("root"));

编辑1：我已经用Postman测试了python后端API，并且可以看到它已经很好地工作了，如您所见，如图所示：

编辑2：感谢@Maku，这是后端的更新代码，该代码允许所有起源，方法和标头。我是服务器开发的新手，但我猜测这不是一种非常安全的编码方式，但至少可以正常工作（如果我找到了更推荐的方式，那么我将添加第三个EDIT）

参考方案

在您的猎鹰服务器中启用CORS，并删除您的JavaScript中的“ no-cors”标志，前几天对我有用。
https://github.com/lwcolton/falcon-cors应该为您工作。为了测试它，您可以只允许所有这样的来源（我正在使用另一个python框架，所以我还没有测试这个确切的falcon扩展名）

cors = CORS(allow_all_origins=True, allow_all_headers=True)

api = falcon.API(middleware=[cors.middleware])

编辑：添加allow_all_headers = True像评论中讨论的那样。

Python dict组合与JS原型继承之间的实际区别 - javascript

以下每个代码段中的combo之间是否有实际区别？Python 3.5以上版本：foo = {'name': 'foo', 'one': 1, 'two': 2} bar = {'two': "two", 'three':…

Javascript-Python:将动态生成的图像提供给客户端浏览器？ - php

场景：用户加载页面，正在生成图像，显示加载栏，通知事件已发送到浏览器。我正在使用python代码生成图像。拥有启动脚本或将Web服务器代码嵌入python脚本的Web服务器是否理想？图像完成渲染后，客户端应收到一条消息，说明图像成功并显示图像。如何设计它以同时支持并发用户？是否只需为每个导航到该网页的新用户启动python脚本就足够了？在这种情况下拥有实时W…

Python Selenium:无法单击按钮 - javascript

我是python的新手，并且想编写一个网络抓取工具，其中涉及在弹出窗口中单击鼠标“确定”按钮。其他一切都进行得很好，但是我无法单击最终按钮，导致数据下载。javascript如下：我尝试通过ID查找元素，但出现以下错误消息： 参考方案 find_elements_by_id返回元素列表。遍历find_elements_by_id返回的列表，或使用find_e…

Javascript + Python:将数组发送到Python脚本，将结果返回给Javascript - javascript

我想建立一个网页，该网页通过Javascript API进行许多Facebook状态更新，并将它们分类到一个数组中。然后，我想将此数组发送到Python脚本，该脚本可以专门使用NLTK.进行语言分析。在Python中获得合适的结果后，我想将结果从该脚本返回到Javascript，以显示给用户等。听起来可能吗？ javascript大神给出的解决方案 是的，完…

Javascript vs python:具有两个递归分支的函数的不同输出 - javascript

我一直在将python代码毫无问题地翻译成javascript，但对于以下示例，我却没有这样做，也不知道是什么原因。尽管有相似的代码，但是javascript代码似乎产生了与python完全不同的输出。我已经研究了这个问题，并且似乎javascript无法执行第二个递归分支？谁知道我该如何使javascript代码输出与python相似的代码？谢谢1- Py…