I see some answers on StackOverflow but it is difficult to understand and I have also tried to sanitize it but the issue is the same.
Access to image at '.svg' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<div [ngStyle]="{'-webkit-mask-image': 'url(.svg)'}">
yo! This text is contained within a <code>P</code> tag.
</div>
Code on stackblitz
I see some answers on StackOverflow but it is difficult to understand and I have also tried to sanitize it but the issue is the same. https://stackoverflow./a/61984516/4646531
Access to image at 'https://mdn.mozillademos/files/12676/star.svg' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<div [ngStyle]="{'-webkit-mask-image': 'url(https://mdn.mozillademos/files/12676/star.svg)'}">
yo! This text is contained within a <code>P</code> tag.
</div>
Code on stackblitz
Share Improve this question edited Jun 2, 2021 at 2:22 jesvin palatty 3733 silver badges10 bronze badges asked May 26, 2021 at 18:40 anonymousanonymous 1,7112 gold badges23 silver badges45 bronze badges 1- It's quite posible that the test that you are doing will never work. Accesing an outer URL from localhost is usually restricted. You should try to load a local resource, it most probably will work. And when going to production, host and access the image in your server. – vals Commented Jun 1, 2021 at 9:42
6 Answers
Reset to default 3A small point in addition to the other answers.
Yes, you're getting hit by a CORS error, and unless you control the server, it's unlikely that you'll be able to get around it (http requesting https).
The reason why though, is because you're using it as a mask.
If you embed a simple image:
<img src="https://mdn.mozillademos/files/12676/star.svg">
There's no problem, no error.
Because you're using it as a mask though, the browser has to access the pixels themselves, so you jump to a higher security check.
It's a little similar to the no-cors
property of a fetch
request: https://developer.mozilla/en-US/docs/Web/API/Request/mode - just using the image is the equivalent of no-cors
(just showing it), whereas using it as a mask is the equivalent of needing the Response
, so now you have to go through all the CORS hoops.
Most likely related: https://bugs.chromium/p/chromium/issues/detail?id=786507
I'm getting the same problem, but I can use the image as a background-image but not a mask-image.
It's the same image, cors blocked it only on the mask-image Attribute and not the background-image Attribute.
But to plicate matters, the image is on the same domain however the page is an iframe for others to embed on various websites.
The issue is not the same in the thread you included. Over there the problem was not CORS related although CORS was mentioned in the accepted answer.
This part:
Note: According to W3C remendations, the images you are using for the mask must be returned with correct CORS headers.
I'm not sure whether you can make the resource you are trying to use to allow you to use that image in mask-image. There seem to be some security restrictions on stuff like svg, canvas, mask ...
This here is the same image, but it has access-control-allow-origin headers so that works.
https://mdn.github.io/css-examples/masking/star.svg
Although the question has lot of terms, the main cause boils down to the browser's security feature to check the Host
willingness for Cross Origin Resource Sharing
with Origin
. Not only image, any resource (js, css, html...etc
) if you are trying to access from another origin then from where you got your base file the browser examines for Acess-Control-Allow-Origins
header in the response. The response is delivered to your web app only if the previously said header has your domain or wildcard (*
)
The problem gets little more tricky if you try to use unsafe Http Methods
or Http Request Headers
. Find out what are safe requests here. Browser triggers a pre-flight, for which server should send a valid response allowing the Method in Access-Control-Request-Method
and any unsafe headers in Access-Control-Request-Headers
. Their response equivalents are Access-Control-Allow-Methods
and Access-Control-Allow-Headers
, respectively.
Your case, seems to have no pre-flight as you are making a simple GET
call. Only options you have is to find other Host
that supports CORS policy or get the image under same server context (localhost:4200
in your case). This is a good article to read if you want to find more about CORS.
This problem can be solved by installing this chrome extension (Assuming you are using chrome)
https://chrome.google./webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
After adding this extension, Click on the extension icon => Click on Open Options page => Select the Access-Control-Request-Headers
If you want to know more about this extension =>
https://mybrowseraddon./access-control-allow-origin.html
You can try to setup Angular proxy.
1 - create a file proxy.conf.js at the root of your angular app with the following :
const PROXY_CONFIG = [
{
context: ["/files"],
target: "https://mdn.mozillademos",
secure: false,
logLevel: "error",
changeOrigin: true,
}
];
module.exports = PROXY_CONFIG;
2 - for Angular 12 in angular.json in projects -> yourprojectname -> architect -> serve ->configurations -> development, add "proxyConfig": "proxy.conf.js"
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "client:build:production"
},
"development": {
"browserTarget": "client:build:development",
"proxyConfig": "proxy.conf.js"
}
},
2 bis : for Angular < 12 in angular.json in projects -> yourprojectname -> architect -> serve ->options , add "proxyConfig": "proxy.conf.js"
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "yourprojectname:build",
"proxyConfig": "proxy.conf.js"
},
3 - in your code, set
<div [ngStyle]="{'-webkit-mask-image': 'url(http://localhost:4200/files/12676/star.svg)'}">
yo! This text is contained within a <code>P</code> tag.
</div>