ReactJs - 加载跨域资产答案

【问题标题】：ReactJs - Loading cross domain assetsReactJs - 加载跨域资产
【发布时间】：2015-06-11 03:32:59
【问题描述】：

我创建了一个 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 中默认的、不可更改的行为？

【问题讨论】：

这似乎不是 React 的问题，而是浏览器如何处理跨站点引用。
这根本不是 React。是浏览器。事实上：code.google.com/p/chromium/issues/detail?id=470601 ... 最后一条评论表明特定请求在所有浏览器中都被阻止。您需要通过您的网络服务器代理请求（通过网络服务器获取它，因为它不受跨源策略的限制）。

标签： javascript svg cross-domain reactjs

【解决方案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}]

【讨论】：