Angular 2 - 沒有訪問控制允許源標題

我的項目在後端使用spring，在前端使用angular2。我在spring項目的webapp文件夾下有一個json文件。我試圖從角度訪問它。Angular 2 - 沒有訪問控制允許源標題

我能夠訪問該文件，如果我只需鍵入「http://localhost:8080/project1/test.json」

但是如果我使用的角度相同的鏈接，我得到一個錯誤信息說「沒有訪問控制允許起源頭」

我的角代碼： 1.功能的getJSON（）中定義的service.ts：

getJson(){ 
    return this.http.get('http://localhost:8080/project1/test.json') 
    .map((response:Response) => response.json()); 
}

調用的getJSON（）：

results = []; （resJsonData => this.results = resJsonData）;這是一個簡單的方法。

我創建proxy.conf.json並添加以下行：

{ 
"/project1": { 
"target": "http://localhost:8080", 
"secure": false 
    } 
}

而且還增加了「開始」：「NG服務--proxy-配置proxy.conf.json」 to package.json

我仍然遇到同樣的問題。我做錯了什麼？

來源

2017-08-15 Mukund S

什麼是您的網址看看，當你調用這個頁面是怎樣的？ – Chester

@Chester我可否知道你問了哪個網址？ –

使用jsonp進行調用，如以下鏈接中所述：https://stackoverflow.com/questions/36289495/how-to-make-a-simple-jsonp-asynchronous-request-in-angular-2/36289568#36289568 – soulzcore

出於安全原因，瀏覽器強制執行same origin policy。您的角色頁面位於非本地主機：8080（最有可能的本地主機：3000）之外。所以瀏覽器不允許訪問。

SOP是一個非常重要的網絡概念。例如，您可能已登錄到您的銀行帳戶，然後打開另一個網站。 SOP阻止該網站訪問您的銀行帳戶。

有幾種方法可授予cross origin access。

到目前爲止，最簡單的方法是將所有東西放在同一個原點上。這是爲與生產服務相同的域和端口提供Angular應用程序。對於開發，您可以將ng serve配置爲充當代理服務器。因此，您將向http://localhost:3000/project1/test.json提出服務請求，並讓ng service將其轉發到localhost：8080。這在Angular proxy documentation中有詳細解釋。

如果即使在生產環境中您仍然需要交叉原點請求，Spring允許這樣做相對容易：您需要使用@CrossOrigin註釋您的服務方法，如Spring REST tutorial中所述。在這種情況下，通過cookie進行身份驗證將不再有效。如果你需要認證，你應該看看oauth。將@CrossOrigin批註添加到您的服務方法中，將使Spring-REST添加Access-Control-Allow-Origin http標頭。

使用合適的CORS的另一種替代方法是使用jsonp，但這是現在應該避免的黑客攻擊。 JSONP利用這一事實，你可以包括一個<script>標籤到任何來源，並提供的JavaScript被下載並執行。因此，JSONP背後的想法是，您定義了一個回調函數，服務器將生成並返回以實際數據爲參數調用此函數的JavaScript代碼。

來源

2017-08-15 18:49:12

我嘗試在prof.conf.json中添加以下代碼：「/ project1」：{「target」：「http：// localhost：8080」，「secure」：false }仍然是同一個問題。我做錯了什麼？ } –

您是否已將'this.http.get'代碼行更改爲指向localhost：3000？ –

假設該服務是由Spring @RestController實現的，並且您需要通過運行其他服務的服務器之外的網站使用該服務。在這種情況下，只需在處理程序方法中添加一個@CrossOrigin註釋。

例如（在這個例子中，@CrossOrigin是僅啓用的addSite處理方法。

@RestController 
public class SiteController { 

    @Autowired 
    private SiteServiceImpl siteService; 

    @CrossOrigin(origins = "*") 
    @RequestMapping(method = RequestMethod.POST, value = "/api/sites") 
    public void addSite(@RequestBody Site site){ 
     siteService.addSite(site); 
    }

而且還可以啓用@CrossOrigin整個控制器使@CrossOrigin在@RestController水平。

例如：

@RestController 
@CrossOrigin(origins = "*") 
public class SiteController { 

    @Autowired 
    private SiteServiceImpl siteService; 


    @RequestMapping(method = RequestMethod.POST, value = "/api/sites") 
    public void addSite(@RequestBody Site site){ 
     siteService.addSite(site); 
    }

@CrossOrigin(origins = "*")註釋允許所有剩餘服務之外的資源將使用它，如果服務只能用於源自一個特定源的資源，那麼只需將源值更改爲資源所在的服務器名稱;對於例如@CrossOrigin(origins = "http://myothersite.com")

有一個在春天的網站更相關的信息：cors-support-in-spring-framework

來源

2017-08-16 04:27:29

Angular 2 - 沒有訪問控制允許源標題

回答

相關問題