javascript - ReactJs - Loading cross domain assets -

javascript - ReactJs - Loading cross domain assets -

i created react component load svg url. it's pretty straightforward , uses svg utilize syntax sprite sheet. below code, i'm using es6 syntax well:

export class icon extends react.component { render() { var classes = "icon", url = this.props.url, definedclass = this.props.classes; if (definedclass) { classes = classes + ' ' + definedclass } homecoming ( <svg classname={classes} viewbox="0 0 35 35" dangerouslysetinnerhtml={{__html: "<use xlink:href='" + url + "'></use></svg>"}}> </svg> ) } }

this works fine when loading same domain, when seek load along other code widget on different domain run error.

unsafe effort load url http://localhost:3123/assets/svg/star.svg frame url http://localhost:8000/. domains, protocols , ports must match.

is there way around this, or default, unchangeable behavior in react?

as side note, cannot mix http content https (though doesn't apply question)

add lines below .htaccess allow cors.

# ajax withcredentials=false (cookies not sent) header set access-control-allow-origin "*" header set access-control-allow-methods "post, get, put, options, patch, delete" header set access-control-allow-headers "x-accept-charset,x-accept,content-type" rewriteengine on rewritecond %{request_method} options rewriterule ^(.*)$ $1 [r=200,l,e=http_origin:%{http:origin}]] # ajax withcredentials=true (cookies sent, ssl allowed...) setenvifnocase origin (.*) origin=$1 header set access-control-allow-methods "post, get, put, options, patch, delete" header set access-control-allow-origin "%{origin}e" header set access-control-allow-credentials "true" header set access-control-allow-headers "x-accept-charset,x-accept,content-type" rewriteengine on rewritecond %{request_method} options rewriterule ^(.*)$ $1 [r=200,l,e=http_origin:%{http:origin}]

javascript svg cross-domain reactjs