ReactJs - 加载跨域资源

Question

我创建了一个React组件，用于从URL加载SVG。这很简单，并使用SVG use语法作为精灵表。以下是我的代码，我也使用了ES6语法：

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 http://localhost:8000/ 加载URL http://localhost:3123/assets/svg/star.svg。 域，协议和端口必须匹配。

是否有任何方法可以解决这个问题，还是这只是React中默认且无法更改的行为？

- Michael

---

这似乎不是React的问题，而是浏览器处理跨站点引用的方式。 - Felix Kling

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

Answer 1

附带说明，您不能混合使用HTTP内容和HTTPS（尽管这与您的问题无关）

将以下行添加到.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}]

- anurag