如何创build跨域请求(Angular 2)?

如何使用Angular 2创build跨域请求? 你能提供一个例子吗? localhost:3000和localhost:8000跨域请求? 谢谢。

事实上,Angular2中没有任何关于跨域请求的事情。 CORS是浏览器原生支持的东西。 这个链接可以帮助你理解它是如何工作的:

简而言之,在跨域请求的情况下,浏览器会在请求中自动添加一个Origin标头。 有两种情况:

  • 简单的请求 。 这个用例适用于使用HTTP GET,HEAD和POST方法的情况。 在POST方法的情况下,仅支持具有以下值的内容types: text/plainapplication/x-www-form-urlencodedmultipart/form-data
  • 预冲的请求 。 当“简单请求”用例不适用时,首先请求(使用HTTP OPTIONS方法)检查​​在跨域请求的上下文中可以做什么。

所以实际上大部分工作必须在服务器端完成才能返回CORS头文件。 主要的是Access-Control-Allow-Origin之一。

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

要debugging这些问题,您可以使用浏览器中的开发人员工具(“networking”选项卡)。

关于Angular2,只需像使用其他任何请求一样使用Http对象(例如相同的域):

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

对我来说这是另一个问题。 对一些人来说这可能是微不足道的,但是花了我一段时间才弄清楚。 所以这个答案可能对某些人有帮助。

我有我的API_BASE_URL设置为localhost:58577 。 读完第一百万次的错误信息后,硬币掉了下来。 问题在于它只支持HTTP和其他一些协议。 我不得不改变API_BASE_URL ,使其包含协议。 所以改变API_BASE_URLhttp://localhost:58577它完美的工作。

在客户端,你无能为力。 我在服务器端的控制器中添加@CrossOrigin ,它工作。

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

请参阅文档 。

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

SpringREST提供了@CrossOrigin注释,其中(origins =“*”)允许从任何来源访问REST APIS。

我们可以将其添加到相应的API或整个RestController。