Ошибка CORS с сервером docker nginx с react — axios

#docker #nginx #cors

Вопрос:

У меня есть сервер docker, на котором хранятся некоторые данные. Если я перейду по URL-адресу, я без проблем увижу данные. Однако, когда я запускаю вызов get axios, я получаю ошибку CORS. Есть ли что-то в Axios, что мне нужно настроить?

Ошибка

 Access to XMLHttpRequest at 'http://[myIP]:8080/myFile' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 

Вот файл docker

 user nginx;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include /etc/nginx/mime.types;

    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local]  $status '
                    '"$request" $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log  main;

    server {
        listen 80;

        access_log /var/log/nginx/proxy.access.log main;
        error_log /var/log/nginx/proxy.error.log debug;

        location / {
            root /data;
        }

    }

}
 

Комментарии:

1. Это не док-файл. Это похоже на конфигурацию nginx.

Ответ №1:

CROS это для вашей безопасности. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Чтобы решить эту проблему, вам необходимо выполнить следующий шаг:

1 — добавьте префикс для вашего backend apis лайка /api

2 — Измените свою nginx конфигурацию на сервер backend с proxy_pass помощью .https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

3 — Затем отправьте свой запрос на ваш docker nginx , как это: http://localhost:3000/api/myFile