Я слежу за этим руководство по vuejs и это руководство по колбе разместить мой интерфейс и серверную часть на Raspberry Pi.
В моем интерфейсе есть этот метод, который отправляет на сервер сообщение 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 на стороне SENDER и RECEIVER, чтобы избежать этой ошибки?
Насколько я понимаю, это должно работать, когда выполняется следующее:
Что еще там? Я просто озадачен этой ошибкой перекрестного происхождения.
При использовании http в uwsgi.conf я могу использовать 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. Это помогло бы в устранении этой проблемы, поскольку я мог бы сузить ее. Есть идеи по этому поводу?
Эта проблема возникла из-за 3 ложных конфигураций в моем коде / конфигах.
Как @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 и получаете к нему доступ с ПК A, путь localhost фактически разрешается на ПК A, а не на сервере X. По этой причине рекомендуется правильно настроить имя хоста.
Поскольку моя основная ошибка возникла в проблеме 1 (порт Nginx), было довольно некорректно постоянно изучать проблему 2. (CORS-конфигурация) Чтобы включить CORS, мне нужно было добавить правильные заголовки в Конфигурация Nginx а также необходимо настроить CORS в моем Flask-App. Для Flask я использовал значение по умолчанию, просто используя CORS(app).
В моем частном случае я разрешаю все источники, потому что это приложение находится внутри локальной сети, но вы должны определенно ограничить такой доступ при подключении вашего приложения к Интернету.
Поскольку я направляю приложение на адрес порта 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;
}