当我尝试在 Symfony 3 上获取图像时出现 CORS 错误
CORS error when i try to get images on Symfony 3
我的项目有问题,我在平板电脑上有一个 cordova 应用程序需要从 api 检索图像,我的 api 在 symfony 3 上并且有 Nelmio CORS Bundle 安装和配置,标准获取请求工作,我在 header 上有 '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 is an array that contain image url, type and extension.
这是一个 url 有效的例子:
https://www.#######.com/api/updates/15151
这个不行:
https://#######.com/medias/images/item/4146/andalouse.jpg
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
dev/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
我的项目有问题,我在平板电脑上有一个 cordova 应用程序需要从 api 检索图像,我的 api 在 symfony 3 上并且有 Nelmio CORS Bundle 安装和配置,标准获取请求工作,我在 header 上有 '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 is an array that contain image url, type and extension.
这是一个 url 有效的例子:
https://www.#######.com/api/updates/15151
这个不行:
https://#######.com/medias/images/item/4146/andalouse.jpg
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
dev/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