如何创建跨域请求（Angular 2）？

答

事实上，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(
    ... 
);

+2

'CORS是浏览器原生支持的东西'是我一直在寻找的东西。这意味着如果服务器端工作已经实现，除了测试它之外，客户端（我）不需要做任何事情。 –

答

对我来说是另一个问题。对一些人来说这可能是微不足道的，但是花了我一段时间才弄清楚。所以这个答案可能对一些人有帮助。我的API_BASE_URL设置为localhost:58577。读完第一百万次的错误信息后，硬币掉了下来。问题在于它只支持HTTP和其他一些协议。我必须更改API_BASE_URL，以便它包含该协议。所以改变API_BASE_URL为http://localhost:58577它完美的工作。

答

在客户端无法做到这一点。我在服务器端的控制器中添加了@CrossOrigin，它工作正常。

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

请参考docs。

林

+1

我不确定OP询问Java，Spring或REST，但无论如何，我会添加一个答案，因为：/ – ochi

+0

Spring RestController @CrossOrigin（origins =“*”）正常工作正常。谢谢。你可以添加@RestController来允许访问所有REST API –

+0

谢谢你。在问题的长期搜索之后，你让我微笑。 :) – 0991

答

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

SpringREST提供@CrossOrigin注解其中（起源= “*”）允许从任何来源获得的REST API。

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

答

这里有很多很长的（和正确的）答案。但通常你不会手动做这些事情 - 至少在你开发第一个项目的时候（这是你通常偶然发现的东西）。如果你使用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());

问题就迎刃而解了。

答

根据我的经验，插件可以与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

如何创建跨域请求（Angular 2）？

相关推荐