带有反应的docker nginx服务器的CORS错误 - axios答案

【问题标题】：CORS error with docker nginx server with react - axios带有反应的docker nginx服务器的CORS错误 - axios
【发布时间】：2021-08-05 03:25:17
【问题描述】：

我有一个托管一些数据的 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;
        }

    }

}

【问题讨论】：

这不是 dockerfile。它看起来像一个 nginx 配置。

标签： docker nginx cors

【解决方案1】：

CROS 是为了您的安全。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

要解决此问题，您必须执行以下步骤：

1- 为您的backend apis 添加前缀，例如/api

2- 使用 proxy_pass.https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/ 将您的 nginx 配置更改为服务器 backend

3- 然后将您的请求发送到您的docker nginx，如下所示：http://localhost:3000/api/myFile

【讨论】：