时间戳

首页 > 解决方案 > 当我尝试在 Symfony 3 上获取图像时出现 CORS 错误

image - 当我尝试在 Symfony 3 上获取图像时出现 CORS 错误

问题描述

我的项目有问题，我在平板电脑上有一个科尔多瓦应用程序，需要从 api 检索图像，我的 api 在 symfony 3 上并安装和配置了Nelmio CORS Bundle，标准获取请求工作，我有'Cross -origin-allow' 在标题上，但是当我尝试获取图像网络时说我“CORS 错误：MissingAllowOriginHeader”。

我的捆绑配置：

nelmio_cors:
    defaults:
        allow_credentials: false
        allow_origin: []
        allow_headers: []
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
    paths:
        '^/medias/':
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
            max_age: 3600
        '^/api/':
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
            max_age: 3600

和我检索图像的代码：

const prom = axios({method: "get", url: encodeURI(element.url), responseType: responseType}).then((response) => {
                if (process.env.cordova)
                    createFile(element.id, extension, response.data);
                else
                    response.data.pipe(fs.createWriteStream("./server/public/" + path));
            }).catch((error) => {console.log("IMG DL ERROR FOR " + element.id + " : " + error)});

element 是一个包含图像 url、类型和扩展名的数组。

这是一个有效的 url 示例：

https://www.#######.com/api/updates/15151

而这个不起作用：

https://#######.com/medias/images/item/4146/andalouse.jpg

标签： imagesymfonycorssymfony3.x

解决方案

Nelmio CORS Bundle 提供了一种控制 CORS 的简单方法，在这种情况下缺少节点 origin_regex。

nelmio_cors:
    defaults:
        allow_credentials: false
        allow_origin: []
        allow_headers: []
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
    paths:
        '^/medias/':
            origin_regex: true
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
            max_age: 3600
        '^/api/':
            origin_regex: true
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
            max_age: 3600

好吧，现在让我们谈谈allow_origin: ['*']如果您使用此配置，您的项目中不需要 nemio，在这种情况下，您可以在 nemio_cors.yml 文件中使用您的产品 url 进行更改，并在您的开发本地环境中覆盖：

nemio.yml

nelmio_cors:
    defaults:
        allow_credentials: false
        allow_origin: []
        allow_headers: []
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
    paths:
        '^/medias/':
            origin_regex: true
            allow_origin: ['^http://www.#######.com', '^http://#######.com']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
            max_age: 3600
        '^/api/':
            origin_regex: true
            allow_origin: ['^http://www.#######.com', '^http://#######.com']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
            max_age: 3600

开发/nemio.yml

nelmio_cors:
    paths:
        '^/medias/':
            allow_origin: ['*']
        '^/api/':
            allow_origin: ['*']

另一种解决方案是在来源列表中添加一个 env 参数，就像 SF 5 上的 nemio 一样。

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600

推荐阅读