ReactJs - 加载跨域资产

问题描述：

我创建了一个React组件来从url加载svg。它非常简单，并使用svg use语法作为精灵表。下面是我的代码，我使用ES6语法以及：ReactJs - 加载跨域资产

export class Icon extends React.Component { 

    render() { 
    var classes = "icon", 
    url = this.props.url, 
    definedClass = this.props.classes; 

    if (definedClass) { 
     classes = classes + ' ' + definedClass 
    } 

    return (
     <svg 
     className={classes} 
     viewBox="0 0 35 35" 
     dangerouslySetInnerHTML={{__html: 
      "<use xlink:href='" + url + "'></use></svg>"}}> 
     </svg> 
    ) 
    } 
}

来自同一个域装载时也能正常工作，但是当我尝试以小工具与其他代码一起加载此不同的域上我遇到这个错误。

不安全尝试从URL中加载URL http://localhost:3123/assets/svg/star.svg URL http://localhost:8000/。域，协议和端口必须匹配。

有什么办法可以解决这个问题吗？或者这只是默认的，在React中不可改变的行为？

这似乎不是React的问题，而是浏览器如何处理跨站点引用。 –

这根本不是反应。这是浏览器。实际上：https://code.google.com/p/chromium/issues/detail?id=470601 ......最后一条评论表明，特定请求在所有浏览器中都被阻止。您需要通过您的Web服务器代理请求（通过Web服务器获取它，因为它不会受到跨源策略的限制）。 – WiredPrairie

答

作为一个侧面说明，你不能混淆使用HTTPS HTTP内容（尽管它并不适用于您的问题）

添加下面的线为.htaccess允许CORS。

# with AJAX withCredentials=false (cookies NOT sent) 
Header always set Access-Control-Allow-Origin "*" 
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE" 
Header always 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}]] 

# with AJAX withCredentials=true (cookies sent, SSL allowed...) 
SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1 
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE" 
Header always set Access-Control-Allow-Origin "%{ORIGIN}e" 
Header always set Access-Control-Allow-Credentials "true" 
Header always 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}]

ReactJs - 加载跨域资产

相关推荐