nginx - caddy 跨域的问题 CORS 错误？

Question

这个是我的caddyfile 配置文件

xxxx.com {    encode zstd gzip    file_server browse {        root /srv/xxxx.com    }}

我的站点有一些js css
我直接引入这些js css 提示我CORS 错误
我在网上了找了一些配置 发现都不对

如：

xxx {    encode zstd gzip    header{        Access-Control-Allow-Origin "{http.request.header.Origin}"        Access-Control-Allow-Credentials true        Access-Control-Allow-Methods *        Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization    }    file_server browse {        root /srv/xxx    }}

如：

xxxx {    encode zstd gzip    cors    file_server browse {        root /srv/xxx    }}

这些都是不对的！

请问如何配置？

Answer 1

你的问题涉及到CORS（跨源资源共享）错误，这是由于浏览器的同源策略导致的。当浏览器尝试从一个源（域名、协议、端口）获取资源时，如果这些资源被其他源所限制，就会发生CORS错误。

对于Caddy服务器，你可以通过在Caddyfile中添加cors指令来启用CORS。然而，仅仅启用CORS可能不足以解决你的问题，因为你需要更精细地控制哪些源被允许访问。

以下是一个可能的解决方案：

xxxx.com {    encode zstd gzip    cors {        allowed_origins [ "http://example.com" "http://sub.example.com" ]        allowed_methods [ "GET" "POST" ]        allowed_headers [ "Authorization" "Content-Type" ]        max_age 3600    }    file_server browse {        root /srv/xxxx.com    }}

在上面的配置中：

• allowed_origins 允许你指定哪些源可以访问你的资源。你可以列出多个源，用空格分隔。如果你想允许所有源访问，可以使用 *。
• allowed_methods 允许你指定哪些HTTP方法被允许。例如，你可能只想允许GET和POST请求。
• allowed_headers 允许你指定哪些HTTP头被允许。如果你不指定任何头，浏览器将默认允许所有的头。
• max_age 指定了CORS响应的有效期，以秒为单位。在这个例子中，它被设置为3600秒（1小时）。

请注意，你需要根据你的实际需求调整这些设置。如果你想允许所有源、方法和头，你可以使用 *。但是，请注意，这可能会带来安全风险，因为它允许任何源进行任何类型的请求。因此，最好根据你的应用程序的需要来设置这些参数。