☰

修正 #1

tag-icon • tag-icon nginx uwsgi cors flask
修正 #1

我一直在关注这个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，但为了保险起见，我的相关文件在这个要点。

我的问题是：

如何在发送方和接收方正确设置 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"}

尝试使用 headers 和 origin 进行 curl 得到以下结果：

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-工具但我真的不知道如何使用 uwsgi_curl 发送特定的 CORS 标头。但这将有助于解决此问题，因为我可以缩小范围。对此有什么想法吗？

答案1

该问题是由于我的代码/配置中的 3 个错误配置而发生的。

修正 #1

正如 @Slytherin 在评论中所建议的那样，为了使 Nginx 正常工作，我需要将 POST 发送到正确的端口。在我的 Vue-App 中，我已编程将 POST 直接发送到 Flask-App，这会导致 CORS 错误，因为 Nginx 无法添加适当的标头。我通过修复路径修复了它：

...
paths: {
        // This is a static Address. I later changed it to a hostname: firepi:80
        togglePort: "http://192.168.137.139:80/togglePort",
        shift: "http://192.168.137.139:80/shift"
      }
...

需要注意的是，当使用localhost地址时，浏览器实际上会指向自身。因此，如果您在服务器 X 上运行应用程序并从 PC A 访问它，则 localhost 的路径实际上将在 PC A 中解析，而不是在服务器 X 中解析。因此，建议正确设置主机名。

修正 #2

因为我的主要错误发生在问题 1（Nginx 端口）上，所以持续查看问题 2（CORS 配置）是相当错误的。要启用 CORS，我需要在Nginx 配置并且还需要在我的 Flask-App 中配置 CORS。对于 Flask，我使用默认设置，即使用CORS(app)。

在我的特殊情况下，我允许所有来源，因为这个应用程序位于本地网络内，但是当您的应用程序连接到互联网时，您应该明确限制此类访问。

修正 #3

由于我将应用程序定向到端口 80 上的地址，因此我需要在 Nginx 内部配置该链接：

location /togglePort {
        include uwsgi_params;
        uwsgi_pass unix:/var/www/fire-extinguish-visualizer/server/app_uwsgi.sock;
}
location /shift {
        include uwsgi_params;
        uwsgi_pass unix:/var/www/fire-extinguish-visualizer/server/app_uwsgi.sock;
}

相关内容