我一直在关注这个vuejs 指南和这个烧瓶指南，将我的前端和后端托管在树莓派上。

在我的前端，我有这个方法，它将 axios POST 发送到后端。

// path = http://127.0.0.1:5000/shift
// pin, port = 1-8 / SER1

sendByte(pin, port) {
  console.debug(`Setting ${pin} on ${port}`);
  // I'm adding the header to the payload directly
  const payload = {
    data: {
      pin,
      port
    },
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    }
  };
  console.debug(payload);
  axios.post(this.paths.shift, payload);
}

但是我的后端没有收到有效负载（因为 uwsgi.log 中没有任何有效负载），而是在控制台中收到此错误：

11:53:38.551 new-submission event fired Setup.vue:52
11:53:38.578 Watch-Handler for submissions fired (localStorage updated) Setup.vue:33
11:53:42.312 Setting 1 on SER1 Visualization.vue:83
11:53:42.313
Object { pin: 1, port: "SER1" }
Visualization.vue:85
11:53:45.151 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/shift. (Reason: CORS request did not succeed). 2
11:53:45.154 Error: Network Error createError.js:16
11:53:46.351 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/togglePort. (Reason: CORS request did not succeed). 2
11:53:46.353 Error: Network Error createError.js:16

因为它与此错误最相关，所以这是我的 nginx.conf：

server {
    listen      80;
    server_name fire.com;
    charset utf-8;
    root    /var/www/fire-extinguish-visualizer/dist;
    index   index.html index.htm;    # Always serve index.html for any request
    location / {
        try_files $uri /index.html @fireFlask;
    }
    location /static {
        root /var/www/fire-extinguish-visualizer/dist/;
    }
    location @fireFlask {
        include uwsgi_params;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' '*';
        # uwsgi_pass unix:/var/www/fire-extinguish-visualizer/server/uwsgi.sock;
        # uwsgi_pass 127.0.0.1:5000;
        uwsgi_pass uwsgi://localhost:5000;
    }
    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

我已经尝试了许多配置和设置，但我无法让它工作。

在所有这些尝试之后，我不想发布我尝试过的每个 nginx.conf 或 uwsgi.ini，但是为了更好地衡量，我的相关文件在这个 gist中。

我的问题是：

如何在 SENDER 和 RECEIVER 端正确设置 CORS 以避免此错误？

据我了解，完成以下操作后它应该可以工作：

• Nginx 将 CORS 标头添加到来自托管应用程序的 POST 请求
• uWSGI 配置正确
• Flask 应用程序已安装 CORS 并允许跨域请求

那里还有什么？我现在只是对这个跨域错误感到困惑。

在 uwsgi.conf 中使用 http 时，我可以使用 curl 来获得正确的响应：

pi@firepi:~ $ curl -X POST http://localhost:5000/togglePort -d '{"port":"SER1", "trigger":0}' -H 'Content-Type:
 application/json'
{"status":"success"}
pi@firepi:~ $ curl -X POST http://localhost:5000/shift -d '{"port":"SER1", "pin":1}' -H 'Content-Type: application/json'
{"status":"success"}

尝试带有标题和来源的卷曲给出了这个：

pi@firepi:~ $ curl --include -X OPTIONS http://localhost:5000/togglePort -d '{"port":"SER1","trigger":0}' --header Access-Control-Request-Method:POST --header Access-Control-Request-Headers:Content-Type --header Origin:http://localhost:80
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Allow: OPTIONS, POST
Access-Control-Allow-Origin: http://localhost:80
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Vary: Origin
Content-Length: 0

我也偶然发现了uwsgi-tools，但我真的不知道如何使用 uwsgi_curl 发送特定的 CORS 标头。不过，这将有助于解决此问题，因为我可以缩小范围。有什么想法吗？