javascript - ReactJs - 加载跨域资源

Question

我创建了一个 React 组件来从 url 加载 svg。它非常简单，使用 svg use 语法作为 sprite 表。下面是我的代码，我也使用 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:3123/assets/svg/star.svg来自带有 URL 的框架 http://localhost:8000/ .域、协议(protocol)和端口必须匹配。

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

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}]