发送带有fetch to flask的POST时出现端口问题

Question

我的情况的小背景：

我的VPS上有一个带有公共IP的应用程序。VPS基于centOS7，我想通过fetch将POST查询从JavaScript客户端发送到服务器。从服务器端，我使用flask接收POST数据

服务器端httpd.conf：

<Directory "/var/www/html/wet-pogotowie.pl">
  <IfModule mod_headers.c>
    AllowOverride All
    Require all granted
    Header add Access-Control-Allow-Origin "https://wet-pogotowie.pl"
    Allow from all
  </IfModule>
</Directory>

烧瓶代码：

from flask import Flask, request, jsonify
import json
app = Flask(__name__)

@app.route("/api", methods=['GET', 'POST'])
def json():
  content = request.json
  return content

context = ('/var/.certs/cert.crt', '/var/.certs/priv.key')
if __name__ == '__main__':
   app.run(host = 'wet-pogotowie.pl', port = 443, ssl_context = context, debug = True)

JS的fetch:

time = setInterval(function() {
  var zzz = {"xyz": "123"};
  const data = JSON.stringify(zzz);
  const options = {
    method: 'POST',
    body: data,
    mode: 'cors',
    headers: {
      'content-type': 'application/json',
      'Access-Control-Allow-Origin': 'https://wet-pogotowie.pl',
      'Access-Control-Request-Method': 'GET, POST, DELETE, PUT, OPTIONS',
      'Access-Control-Allow-Credentials': 'true',
      crossorigin: true,
    },
  };

  fetch('https://wet-pogotowie.pl/api', options) // TU DZILA, NIE DZIALA Z PORTEM
  .then(response => response)
  .then(data => {
    // if everting is ok should log the object  message: "Long lang sent to express" from server
    console.log(data)
  });
}, 9000);

问题是： 我无法在flask中设置端口443，因为它当然已被占用，但当我尝试在fetch中设置其他端口时，会出现“同源策略”-CORS错误

我的问题： 我需要在哪里以及需要改变什么？我是否需要在代码或服务器端更改某些内容

其他信息： 当fetch设置为默认80端口-POST工作时，浏览器中的控制台登录会显示它，但接收到404错误

更新：

我已将服务器从apache更改为nginx，下面是nginx.conf文件的一部分：

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       443 ssl http2 default_server;
        listen       [::]:443 ssl http2 default_server;
        server_name  www.wet-pogotowie.pl;
        root         /var/www/html/www.wet-pogotowie.pl;
#   process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
         ssl_certificate "/var/.certs/cert.crt";
         ssl_certificate_key "/var/.certs/priv.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;


    location /api
{
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

        proxy_pass https://www.wet-pogotowie.pl:3000;
    }

main.js:

time=setInterval(function(){
const data = "patrz wredny"
const options = {
    method: 'get',
    mode: 'no-cors',
    headers: {
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': 'wet-pogotowie.pl',    
        'Access-Control-Request-Method': 'GET, POST, DELETE, PUT, OPTIONS',
        'Access-Control-Allow-Credentials': 'true',
    'Access-Control-Allow-Headers': 'wet-pogotowie.pl',
        
    },
}
fetch('https://wet-pogotowie.pl:3000/api',options)
.then(response => response)
.then(data => {
    // if everting is ok should log the object  message: "Long lang sent to express" from server
    console.log(data)
});
  },9000);

Flask代码相同-只有diff端口设置为3000并且启用了SSL_上下文。 我的观点是-如何将GET/POST从JS的前端发送或接收到python的flask

Answer 1

我想这里有一些令人困惑的事情

通常，您的应用程序不会直接在端口80或端口443上侦听，尽管这当然是可能的。在共享托管环境中，这肯定是不太可能的。相反，您可以配置nginx（或者我认为这是您的Apache配置？伙计，我不知道人们还在使用它）来反向代理到您的python/node/ruby应用程序。您的应用程序在环回端口上监听您喜欢的任何内容，如8080或9000等。您不想自己执行SSL终止或静态文件托管，让nginx（或其他）为您执行此操作

也不清楚你是否需要跨来源的东西。该网站是否在同一个域上调用api

对端口80的fetch调用“起作用”，因为nginx/apache试图提供该URI，但您得到了404，因为（我猜）您没有将流量正确地路由到后端python代码

也许可以发布更多关于哪个主机、哪个httpd以及您在开发中使用了什么的信息