如何創建跨域請求（Angular 2）？

35

事實上，Angular2中沒有關於跨域請求的問題。 CORS本來就是由瀏覽器支持的。此鏈接可以幫助你瞭解它是如何工作的：

短，在跨域請求的情況下，瀏覽器會自動添加一個Origin頭中的請求。有兩種情況：

簡單請求。這個用例適用於我們使用HTTP GET，HEAD和POST方法的情況。對於POST方法，僅支持具有以下值的內容類型：text/plain,application/x-www-form-urlencoded和multipart/form-data。
預照明請求。當「簡單請求」用例不適用時，首先請求（使用HTTP OPTIONS方法）檢查在跨域請求的上下文中可以做什麼。

所以實際上大部分的工作必須在服務器端完成才能返回CORS頭文件。主要的是Access-Control-Allow-Origin之一。

200 OK HTTP/1.1 
(...) 
Access-Control-Allow-Origin: *

要調試此類問題，可以在瀏覽器（網絡選項卡）中使用開發人員工具。

關於Angular2，只需使用Http對象像任何其他請求（例如同一個域）：

return this.http.get('https://angular2.apispark.net/v1/companies/') 
      .map(res => res.json()).subscribe(
    ... 
);

來源

2016-01-14 12:52:04

+2

'CORS是瀏覽器原生支持的東西'是我一直在尋找的東西。這意味着如果服務器端工作已經實現，除了測試它之外，客戶端（我）不需要做任何事情。 –

15

對我來說是另一個問題。對一些人來說這可能是微不足道的，但是花了我一段時間才弄清楚。所以這個答案可能對一些人有幫助。我的API_BASE_URL設置爲localhost:58577。讀完第一百萬次的錯誤信息後，硬幣掉了下來。問題在於它只支持HTTP和其他一些協議。我必須更改API_BASE_URL，以便它包含該協議。所以改變API_BASE_URL爲http://localhost:58577它完美的工作。

來源

2016-07-04 09:48:14 larzz11

6

在客戶端無法做到這一點。我在服務器端的控制器中添加了@CrossOrigin，它工作正常。

@RestController 
@CrossOrigin(origins = "*") 
public class MyController

請參考docs。

林

來源

2017-01-26 16:59:25

+1

我不確定OP詢問Java，Spring或REST，但無論如何，我會添加一個答案，因爲：/ – ochi

+0

Spring RestController @CrossOrigin（origins =「*」）正常工作正常。謝謝。你可以添加@RestController來允許訪問所有REST API –

+0

謝謝你。在問題的長期搜索之後，你讓我微笑。 :) – 0991

0

@RestController 
@RequestMapping(value = "/profile") 
@CrossOrigin(origins="*") 
public class UserProfileController {

SpringREST提供@CrossOrigin註解其中（起源= 「*」）允許從任何來源獲得的REST API。

我們可以將它添加到相應的API或整個RestController。

來源

2017-07-24 05:32:08

0

這裏有很多很長的（和正確的）答案。但通常你不會手動做這些事情 - 至少在你開發第一個項目的時候（這是你通常偶然發現的東西）。如果你使用koa作爲後端：使用koa-cors。通過NPM安裝...

npm install --save koa-cors

...，並在代碼中使用它：

const cors = require('koa-cors'); 
const Koa = require('koa'); 
const app = new Koa(); 
app.use(cors());

問題就迎刃而解了。

來源

2017-12-10 00:54:07 achimbode

0

根據我的經驗，插件可以與http協同工作，但不能與最新的httpClient協同工作。另外，在服務器上配置CORS respsonse頭文件不是真正的選擇。所以，我創建了一個proxy.conf.json文件來充當代理服務器。

下面是我prox.conf.json文件

{ 
    "/posts": { 
    "target": "https://example.com", 
    "secure": true, 
    "pathRewrite": { 
    "^/posts": "" 
    }, 
    "changeOrigin": true 
    } 
}

我放在旁邊的中的package.json的proxy.conf.json文件正確文件在同一目錄中

然後我修改了package.json文件中的start命令，如下面的

"start": "ng serve --proxy-config proxy.conf.json"

現在，從我的應用程序組件的HTTP調用如下

return this._http.get('/posts/pictures?method=GetPictures') 
.subscribe((returnedStuff) => { 
    console.log(returnedStuff); 
});

最後運行我的應用程序，我不得不使用NPM啓動或納克服務--proxy -config proxy.conf.json

來源

2017-12-21 22:51:52 rgantla

如何創建跨域請求（Angular 2）？

回答

相關問題