![修正 #1](https://linux22.com/image/740914/%E4%BF%AE%E6%AD%A3%20%231.png)
我一直在关注这个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;
}