将Access-Control-Allow-Origin设置为*的Angular 2 http请求 [英] Angular 2 http request with Access-Control-Allow-Origin set to *

问题描述

我正在使用angular2和打字稿.

I'm using angular2 and typescript.

我正试图发布到我的黑猩猩订阅列表.

I'm trying to post to my mail chimp subscription list.

到目前为止，我的代码:

 constructor(router: Router, http: Http){   
      this.router = router;

      this.http = http; 
      this.headers = new Headers();
      this.headers.append('Content-Type', 'application/json');
      this.headers.append('Access-Control-Allow-Origin', '*');
  }

  subscribe = () => {
        var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
        this.isSuccess = false;

        this.http.request(url, this.headers).subscribe(response => {
           console.log(response);
           this.isSuccess = true; 
        });   
  }

这是我在控制台中收到的错误:

This is the error I get in my console:

我现在收到此错误:Uncaught SyntaxError:意外的令牌<

I get this error now: Uncaught SyntaxError: Unexpected token <

下面的当前代码:

export class Footer{
  email: string = "";
  router : Router;
  http : Http;
  jsonp: Jsonp;
  isSuccess: boolean = false;

  constructor(router: Router, jsonp: Jsonp, http: Http){   
      this.router = router;
      this.http = http; 
      this.jsonp = jsonp;
  }

  subscribe = () => {
        var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
        this.isSuccess = false;

        this.jsonp.request(url).subscribe(response => {
           console.log(response);
           this.isSuccess = true; 
        });   
  }

推荐答案

Access-Control-Allow-Origin标头应该出现在响应中，而不是请求中.

The Access-Control-Allow-Origin header is something that should be present in the response, not in the request.

如果您的服务支持CORS，则必须在响应标头中将其返回以允许请求.因此，这不是您的Angular应用程序的问题，而是必须在服务器端一级处理的问题...

If your service supports CORS, it must return it in the response headers to allow the request. So it's not a problem of your Angular application but it's something that must be handled at the server-side level...

如果您需要更多详细信息，可以查看此链接:

If you need more details, you could have a look at this link:

• 了解和使用CORS- http://restlet. com/blog/2015/12/15/understanding-and-using-cors/
• 调试CORS- http://restlet. com/blog/2016/09/27/how-to-fix-cors-problems/

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

修改

似乎thepoolcover.us10.list-manage.com不支持CORS，但支持JSONP.您可以尝试如下所述重构代码:

It seems that thepoolcover.us10.list-manage.com doesn't support CORS but JSONP. You could try to refactor your code as described below:

constructor(private router: Router, private jsonp: Jsonp){   
}

subscribe = () => {
  var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
  this.isSuccess = false;

  this.jsonp.request(url, this.headers).subscribe(response => {
    console.log(response);
    this.isSuccess = true; 
  });   
}

在调用bootstrap函数时不要忘记指定JSONP_PROVIDERS.

Don't forget to specify JSONP_PROVIDERS when calling the bootstrap function.

有关更多详细信息，请参见此链接:

See this link for more details:

• https://angular.io/docs/ts/Latest/api/http/JSONP_PROVIDERS-let.html

这篇关于将Access-Control-Allow-Origin设置为*的Angular 2 http请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！