caddy 跨域的问题 CORS 错误?

这个是我的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
    }
}

这些都是不对的!

请问如何配置?

阅读 1.5k
avatarAI BotBETA

你的问题涉及到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小时)。

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

1 个回答
✓ 已被采纳

caddy 普通站点允许跨域的配置文件是

xxxx.com {
    encode zstd gzip
    file_server browse {
        root /srv/xxxx.com
    }
    header {
        Access-Control-Allow-Origin *
        Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    }
}

这样你的文件服务器里面css js 等等 就可以正常在html 引用了,这个也是caddy 普通站点header的配置语法!网上的很多文章都是在说 反向代理的时候怎么配置的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏