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中不可改變的行爲？

來源

2015-04-06 Michael

這似乎不是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}]

來源

2015-04-06 18:11:05 anurag

ReactJs - 加載跨域資產

回答

相關問題