如何创建跨域请求？

Question

如何使用Angular 2创建跨域请求？

你能提供一个例子吗？
就像localhost:3000和localhost:8000跨域之间的请求一样

Answer 1

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

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

简而言之,在跨域请求的情况下,浏览器会自动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(
  ...
);

Answer 2

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

我有我的API_BASE_URL设置localhost:58577.在读取错误消息第百万次后,硬币掉落了.问题在于它说它只支持HTTP和其他一些协议的部分.我不得不改变API_BASE_URL它,以便它包含协议.因此,改变API_BASE_URL到http://localhost:58577它的工作完美.

Answer 3

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

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

请参阅文档.

林

Answer 4

以我的经验，这些插件可用于http，但不能用于最新的httpClient。另外，在服务器上配置CORS响应标头并不是真正的选择。因此，我创建了一个proxy.conf.json文件作为代理服务器。

在此处阅读有关此内容的更多信息：https : //github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

以下是我的prox.conf.json文件

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

我在同一目录中的package.json文件旁边放置了proxy.conf.json文件

然后我修改了package.json文件中的启动命令，如下所示

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

现在，来自我的应用程序组件的http调用如下

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

最后要运行我的应用程序，我必须使用npm start或ng serve --proxy-config proxy.conf.json