Shopware Storefront Watcher中AJAX请求因CORS问题失效或被拦截求解决方案

开发者阿泽

2026-8-17

Shopware Storefront Watcher：AJAX请求CORS问题（URL缺失Watcher端口）

我们在使用Shopware Storefront Watcher时遇到过同款问题：AJAX请求因CORS被拦截，根源是Twig模板中url()函数生成的绝对URL不包含Watcher的端口，导致请求发送到无端口的主机，触发跨域限制。

针对这个问题，有几个可行的解决方案：

改用相对路径生成（最简便）
把模板里的url()换成path()函数，生成相对路径而非绝对URL。这样浏览器会自动使用当前页面的域名和端口发送请求，从根源避免跨域：
```
{% set config = {
    url: path('frontend.detail.switch', { productId: page.product.parentId })
} %}
```
配置正确的Storefront基础URL
在项目的.env文件中设置包含Watcher端口的APP_URL，让Shopware生成URL时自动带上端口：
```
APP_URL=http://localhost:8000 # 替换成你的Watcher端口
```
或者在config/packages/storefront.yaml中配置Storefront的URL：
```
storefront:
    url: 'http://localhost:8000'
```
配置后重启Watcher和Shopware服务，确保URL生成逻辑读取到新配置。
手动拼接端口（临时应急方案）
如果上述方法无法快速生效，可以在模板中手动获取当前请求的端口并拼接，但注意仅在开发环境使用（避免生产环境出现多余端口）：
```
{% set baseUrl = url('frontend.detail.switch', { productId: page.product.parentId }) %}
{% set config = {
    url: baseUrl ~ ':' ~ app.request.port
} %}
```
注：如果url()生成的URL已经包含端口，这个方法会导致重复，所以优先推荐前两种方案。