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 - 没有访问控制允许源标题

回答

相关问题