Angular2 bit.ly 'Access-Control-Allow-Origin' 标头问题

Posted

技术标签:

【中文标题】Angular2 bit.ly \'Access-Control-Allow-Origin\' 标头问题【英文标题】:Angular2 bit.ly 'Access-Control-Allow-Origin' header issueAngular2 bit.ly 'Access-Control-Allow-Origin' 标头问题 【发布时间】:2017-06-10 11:51:11 【问题描述】:

我正在尝试让 bit.ly API 正常工作,但我遇到了 CORS 问题。我检查了所有可能的来源,但问题仍然存在。

Angular2 代码:

getBitLyUrl (fullUrl : string): Observable<string> 


   let headers = new Headers('Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' ); 
   let options = new RequestOptions( headers: headers ); 


   let res =  this._http.get('https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=' 
                  + fullUrl + '&format=json', options)
        .map((response: Response) => response.json());

    return res;

来自 Chrome 网络的标头:

General:
Request URL:https://api-ssl.bitly.com/v3/shorten?      access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma  .net&format=json
 Request Method:OPTIONS
 Status Code:200 OK
 Remote Address:67.199.248.20:443


Response:
Allow:GET, POST, OPTIONS
Connection:keep-alive
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Wed, 25 Jan 2017 10:22:31 GMT
Server:nginx

Request:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en,cs;q=0.8,sk;q=0.6,de;q=0.4
Access-Control-Request-Headers:access-control-allow-origin, x-xsrf-token
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:api-ssl.bitly.com
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (Khtml,   like Gecko) Chrome/55.0.2883.87 Safari/537.36

我收到此错误:

XMLHttpRequest 无法加载 https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma.net&format=json。 对预检请求的响应未通过访问控制检查:否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:3000” 访问。

任何帮助将不胜感激!

【问题讨论】:

【参考方案1】:

let headers = new Headers('Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' ); 。这是一个响应头。 CORS 设置为保护后端服务器,因此后端服务器必须设置这些标头作为响应。如果您不控制服务器,则除非他们批准您的域,否则无法从跨域访问它。

OPTIONS 请求由浏览器设置,而不是角度设置。阅读更多关于它的信息here。

Cross-Origin Resource Sharing 标准通过添加新的 HTTP 标头来工作,这些标头允许服务器描述 允许使用网络浏览器阅读该信息。 此外,对于可能导致副作用的 HTTP 请求方法 用户数据(特别是 GET 以外的 HTTP 方法或 POST 与某些 MIME 类型一起使用)。该规范要求 浏览器“预检”请求,从 带有 HTTP OPTIONS 请求标头的服务器,然后,在 来自服务器的“批准”,发送带有实际请求的实际请求 HTTP 请求方法。服务器还可以通知客户端是否 “凭据”(包括 Cookie 和 HTTP 身份验证数据)应 随请求一起发送。

【讨论】:

Raj,当我使用纯 JS 尝试他们的示例时,它运行良好。 dev.bitly.com/cors.html 他们的例子和我的不同之处在于,来自 Angular 的请求以 Option 开头。虽然他们的示例发送 GET。 删除let headers = new Headers('Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' ); 行,请求就会生效。正如这里的答案所指出的,Access-Control-Allow-Originresponse 标头,而不是请求标头。所以永远不要在请求中发送它。在请求中包含它实际上是 causing your browser to send an OPTIONS preflight request 而不是 GET。发送Accept: application/json 也可以,但没有它,请求也可以正常工作。 它不起作用。我添加了标题只是为了根据一些在线建议对其进行测试。我尝试了 jsonp。它适用于 localhost:3000,但不适用于 wamp 上的 localhost。我在这里有点绝望。 您删除了options 仍然出现同样的错误?【参考方案2】:

只需从 get 函数中删除标头和选项参数

【讨论】:

以上是关于Angular2 bit.ly 'Access-Control-Allow-Origin' 标头问题的主要内容,如果未能解决你的问题,请参考以下文章

Ruby on Rails - 生成 bit.ly 样式标识符

集成到 Bit.ly API 版本 4 - 如何生成 OAuth2 令牌以与 Bit.ly API V4 集成并创建缩短的 url?

PHP bit.ly类

JavaScript bit.ly透明叠加JavaScript书签

ActionScript 3 在Twitter上分享(Bit.ly缩短链接)[FLEX]

php - 使用 bit.ly api 的短链接数组